Redux-form: Validation errors not passed to fields after re-initialize when enableReinitialize is turned on

[roryp2]

When passing the enableReinitialize flag all of the fields are getting being marked as valid even though there are errors present for them. It appears to be that when initialize is called a second time it does not trigger the redux-form/UPDATE_SYNC_ERRORS action and as such all of the fields don't get updated with their error state again.

When this flag is passed, I think the redux-form/UPDATE_SYNC_ERRORS action always needs to get triggered in this scenario and maybe a change in the logic of updateSyncErrorsIfNeeded is needed?

[roryp2]

I think it is related to the logic here: https://github.com/erikras/redux-form/blob/v6.0.0-rc.3/src/reduxForm.js#L129

Due to the syncErrors being the same at the point of the re-intialize, this logic stops the errors being passed back down to the fields: !plain.deepEqual(syncErrors, nextSyncErrors)

[nvelickovic10]

Any new info on this?
Thanks.

[jzalucki]

Same issue when your initial values are invalid, you do some changes to fields not required (that won't affect syncErrors) and you press reset. Then redux-form/UPDATE_SYNC_ERRORS event is not triggered because !plain.deepEqual(syncErrors, nextSyncErrors) return false (this is because you are comparing syncErrors coming from this.props while there are currently nextProps that have up to date syncErrors array and this one should be used for that comparison).

Definitely validateIfNeeded and updateSyncErrorsIfNeeded need to be fixed because its not working in v6.0.1 too.

[dannymk]

Same here, any progress on this issue?

[piotrkl]

Do you have a workaround for this issue?

[antoinerousseau]

For now I'm adding keepDirtyOnReinitialize: true but it's not really the ideal behavior for me

[piotrkl]

I see it the same way as @roryp2 and @jzalucki. In both cases redux-form/UPDATE_SYNC_ERRORS action should be triggered. For me, keepDirtyOnReinitialize: true does not solve the problem.

[osigum]

I guess, things I'm experiencing are related to this issue. An events chronicle:

0) A form starts mounting.
1) The form is validated for the first time -> redux-form/UPDATE_SYNC_ERRORS is called with an error before componentWillMount.
2) The form is initialized with valid values on componentWillMount.
3) The form is validated for the second time -> redux-form/UPDATE_SYNC_ERRORS is NOT called.
4) The form renders, registers it's fields and so on.

[morulus]

My way to resolve this problem is to call reset() manually when initialValues got changes. But you should not disable enableReinitialize, because, without it, component won't receive initialValues prop as expected.

componentWillReceiveProps({ initialValues }) {
    if (this.props.initialValues && ( initialValues !== this.props.initialValues )) {
      this.props.reset();
    }
}

The important condition is to check whether this.props.initialValues is not null, if you are using async initialization.

[lechneal]

@morulus I still get redux-form/UPDATE_SYNC_ERRORS called after i dispatch RESET...

[huitre]

@lechneal I had a similar issue that I resolved with this code.

componentWillMount() {
...
  this.props.reset();
  this.props.initialize({
        title,
        description,
        url,
        media,
     });
})

export default reduxForm({
...
  keepDirtyOnReinitialize: true
});

[lechneal]

@huitre thanks for your help. Unfortunately I require keepDirtyOnReinitialize to be false, causing the subsequent submission to fail: #2427

[jovinbm]

@piotrkl I had the same issue. I was using [email protected] two days ago and it was working fine without any hacks. I upgraded yesterday to [email protected] to get the flexibility of Field-Level validation and started to experience the same issue. Good enough, Field-Level Validation was added since v6.3.0 and I downgraded to that and it's been working fine since then. There might be an issue in one of the latest releases.

[jovinbm]

In v6.5.0 UPDATE_SYNC_ERRORS is dispatched before INITIALIZE causing the errors to be registered in redux. No other UPDATE_SYNC_ERRORS is dispatched until a form field is changed. This has also been noticed in https://github.com/erikras/redux-form/issues/2484 In v6.3.0 I have noticed that the first dispatch of UPDATE_SYNC_ERRORS actually comes after INITIALIZE and REGISTER_FIELD which should be the desired behaviour as it cleans up errors.

[rvanlaarhoven]

When debugging this issue I noticed the props.values and nextProps.values that are passed to shouldValidate (https://github.com/erikras/redux-form/blob/master/src/defaultShouldValidate.js) are always the same. Not sure why this happens since validateIfNeeded is called on componentWillReceiveProps.

Since both values are always the same, shouldValidate only returns true when it's an initialRender.

[rmlevangelio]

Any update with this one?

[fgiarritiello]

I have the same problem. Any updates on this? Thanks

[rmlevangelio]

@fgiarritiello The latest update solves the problem.

[fgiarritiello]

@rmlevangelio v6.5.0 still has the problem. https://github.com/erikras/redux-form/issues/1385#issuecomment-278515813

[rmlevangelio]

@fgiarritiello The latest update solves the problem.

[rmlevangelio]

@fgiarritiello try 6.3.0. It works fine on my end

[fgiarritiello]

@rmlevangelio yes 6.3.0 works fine but that's not the latest update :) (6.5.0 is the latest)

[rmlevangelio]

@fgiarritiello Oh. Apologies. Did you use some new features of 6.5.0? I think if you're not using the latest features, you can downgrade to 6.3.1.

[fgiarritiello]

@rmlevangelio No I'm not using any of the new features of 6.5.0 so I'm ok with downgrading to 6.3.1. I was just asking if this issue had been fixed in the next patch. thanks for the help

[fenos]

@erikras any update on this? We can't get around this, we have a wizard which whenever you navigate to the previous step, the fields initiated withinitialValues are invalid, even though they are not

[fgiarritiello]

@fenos I'm still using 6.3.0 to get around the problem.

[erikras]

Thanks, @osigum. Your timeline of the bug has really helped in investigating it. 👍

[erikras]

Fix published in v6.6.3.

[amirtgm]

version 6.6.3 still has the problem. #2814

[timhwang21]

Hi @erikras, I think #2797 may have caused a regression. There's also a discussion going on in #2838.

I replicated the steps followed by @bbenezech in his test, then I repeated after changing the version to 6.5.0 and then 6.3.2. The error described happened for all three versions on code sandbox, contrary to what people have been saying above.

[abrad45]

I'm still experiencing this now on v6.6.3

This suggestion above by @morulus helped me to work around this issue: https://github.com/erikras/redux-form/issues/1385#issuecomment-277455778

Both aspects of this solution are necessary to resolve the bug.

[atMari]

The above work around did not work for me. I am still seeing this issue in v6.7.0

[abrad45]

@illumimari I don't have this issue any longer on v6.7.0

[timhwang21]

@illumimari resolved for me as well. I can try to help if you post some code.

[atMari]

Agh, thanks @abrad45 and @timhwang21. I took a second look at my implementation, and there was a simple mix-up in my form logic that gave a false-positive for this error. Please disregard my previous comment.

[arman-mukatov]

If the initial data is initialized using the action creator - initialize(in method componentWillMount), rather than using the props initialValues, then when second call initialize - it does not trigger the redux-form/UPDATE_SYNC_ERRORS action and as such all of the fields don't get updated with their error state again.

v6.8.0

[alexis1990]

any issue ?

[daniele-bottelli]

v6.8.0 still have this problem; actually I'm using v6.3.0

edit:
I had problems with fieldarray, my problem was using an id instead of the index in a div
this solved my problem in v6.8.0

    {fields.map((item, index) => {
        return (
          <div key={index}>...</div>

) } ) }

[salhotra]

Inside componentWillMount, reset the form component and set destroyOnUnmount to false. Also Initialize the fields as empty string or whatever you need.

componentWillMount() {
    this.props.reset();
  }

reduxForm({
  form: 'login',
  destroyOnUnmount: false,
})(LoginForm);

  connect(
    state => ({
      initialValues: {
        email :_.get(state,'form.values.email', ''),
        password: _.get(state,'form.values.password', ''),
      },
    }),
  )

The problem in my case was that when the component unmounted, the formState got destroyed and on reinitialization, the action redux-form/UPDATE_SYNC_ERRORS wasn't getting dispatched. Now it's solved.

[lock[bot]]

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.