Values via props.change() in componentDidMount() will be overwritten

[beckerei]

I assume this is a bug, since it worked in previous versions of redux-form.
Edit: Can confirm it worked in 7.1.2

We have a form with a few fields which may have a default value. Those are set via props.change(),
see the shortened code below.

componentWillMount() {
  this.preSelectCountry = locale === 'de';
}

componentDidMount() {
    if (this.preSelectCountry) {
      this.props.change('country_code', Object.keys(this.CountryList)[0]);
    }
}

What is the current behavior?

@@redux-form/INITIALIZE is dispatched as first action, followed a couple of @@redux-form/REGISTER_FIELD
@@redux-form/CHANGE is dispatched with correct values. country_code is a registered field the action results in the correct change of the values state for country_code.
Then again @@redux-form/INITIALIZE is dispatched resulting in overwriting the previously set values. Then fields are registered and unregistered again.

To this time there is not a single action which is not dispatched by redux-form.
Some information to set the initial value of those fields are only available as props, I am unsure about how to usereduxForm({ ...initialValues: { ... }}) to do this. This would work, since we use this method to set a initial value to a field.

Form Validation will somehow consider those set values, they are even displayed correctly. But are missing when submitting.

Note: There is not much more logic in this app besides sending the form to server and displaying a result page.

What is the expected behavior?

I don't expect the form the initialize twice, resulting in overwriting previously set data.

Sandbox Link

I will setup a demo for this as soon as I have time for it.

Edit: I condensed the application we have: https://codesandbox.io/s/konx6r9zpv

What's your environment?

redux-form: 7.2.0
the app is tested with: Chrome, Firefox, Safari, IE10/11 (😢) on osx/window

[inPhoenix]

I noticed the same issue. Basically, the componentDidMount is not working to change/dispatch(change) values in the form. I had the same logic working on 7.0.3 and it is not working on 7.2.0.

[beckerei]

btw. sorry I haven't had the time to create a sandbox for this problem.
A fork of the simple form example with some modifications did not have the issue. I need to dig a little deeper to find the issue. Maybe I try to reduce our repo until I stripped out everything that not caused this.

[liubo13]

I also encountered the same problem. It is working on 7.1.2 and it is not working on 7.2.0.

[beckerei]

I managed to condense our app to a much simpler version with only to fields the bug still is there.

https://codesandbox.io/s/konx6r9zpv

The second field keeps its inital value, the first fields value is overwritten by the second INITIALIZE of the form. I included the redux devtools extension.

Happy to help with fixing this 👍

[beckerei]

If it does not introduce any side effects in your app you can set keepDirtyOnReinitialize to true, updated the sandbox and added this option as comment.

Prior to 7.2.0 initIfNeeded was only called within componentWillMount() and componentWillReceiveProps(), in 7.2.0 it is called in componentDidMount() as well, the code is duplicated from componentWillMount.

[martinhorsky]

Duplicate of #3690

[erikras]

Published fix in v7.2.2.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.