TextField is not getting updated on re-render with different intialValues

Question

I'm using redux-form-material-ui for the forms. I have simple form with two text fields. This form will show the initalValues passed to it and user can also update the values of TextField. These TextFields working fine with validations and all but I'm facing problem while re-rendering. On route change, I'm passing the different intialValues to that form component but even though proper values passed to it, TextFields are not getting updated. It just shows the first time passed initialValues.

Here is my code:

From parent component:

<ReduxForm {...initialValues} />

ReduxForm component:

 class ReduxForm extends React.Component {
  render () {
    return (
      <div>
        <form onSubmit={() => console.log('Submitted')} >
          <Field
            className='input-field'
            name='name'
            component={TextField}
            floatingLabelText='Full Name'
          />
         <Field
           className='input-field'
           name='email'
           component={TextField}
           floatingLabelText='Email'
         />
        </form>
      </div>
   )
 }
}

export default reduxForm({
  form: 'test-form',
  validate
})(ReduxForm)

I Know that, this is the same problem with defaultValue in material-ui's TextField. Is this expected behavior in redux-form-material-ui also? If so, is there way I can solve this issue without setting the state and all?

Thank you!

Answer 1

Haven't used redux-form-material-ui but try adding enableReinitialize: true to your reduxForm decorator

export default reduxForm({
  form: 'test-form',
  validate,
  enableReinitialize: true
})(ReduxForm);

And see if that works.