Formik: Option to not reset all form state when only some initialValues change

[bogdansoare]

I have a Formik component which initials values depend on props

<Formik
  initialValues={{
    foo: this.props.foo,
    bar: this.props.bar
  }}
  ...

I save each field onBlur, which also changes the corresponding prop of the component to keep in sync with the updated value on server (using graphql with apollo-client). This change of prop triggers reset form https://github.com/jaredpalmer/formik/blob/master/src/formik.tsx#L236-L238 and with it losing all errors & touched info. Is there any way to shallow compare the values of the initialValues and only reset the ones that changed?

[jaredpalmer]

Can pasted the component your having issues with?

[jaredpalmer]

FYI: We did this because we couldn't come up with a pattern where this wasn't the desired result. So very curious to understand and dig into the code.

[bogdansoare]

@jaredpalmer sure, will share tomorrow a codesandox with an example

[bogdansoare]

Hey @jaredpalmer . Sorry it took so so long.

Here is the codesandox https://codesandbox.io/s/n31p94m320 .

Here is a demo with the problem, when only one prop changes, the whole forms reset

I think the solution would be to have an option which prevents the form from refreshing dirty values on initialValues change like @VladShcherbin said in his issue #168 . He made some great points, and how redux-form solves those issues.

Another related issue is #172 which mainly has the same problems

[jaredpalmer]

closed by #169

[bogdansoare]

Hey @jaredpalmer.

Unfortunately #169 doesn't fix the problem. I've updated the codesandox https://codesandbox.io/s/n31p94m320 to use 0.9.2 and it's the same issue.

Like I and @VladShcherbin said, the issue is that initialValues are actually different objects in componentWillReceiveProps, because a value in that object has changed and resets the whole form. I don't want the whole form to be resetted because I will lose the dirty values like in the example.

The solution may be to have an option which prevents the form from refreshing dirty values on initialValues change like @VladShcherbin said in his issue #168

[jaredpalmer]

I have a quick and dirty fix in #181

[jaredpalmer]

Let’s move discussion there

[bogdansoare]

cool, sounds good
thanks for the effort 🙏

[jaredpalmer]

Solution is here: https://github.com/jaredpalmer/formik/pull/181#issuecomment-332594908.

tl;dr: Just use React 😄, componentWillReceiveProps and setValues...