Form`s values does not update when change initialValues

[npsouza]

Currently, on Form's componentWillReceiveProps, it does the following:

componentWillReceiveProps(nextProps) {
    if (!isEqual(this.props.initialValues, nextProps.initialValues)) {
        this.setState(prevState => ({
            values: { ...nextProps.initialValues, ...prevState.values }
        }))
    }
}

When I update initialValues prop, the values ​​are not updated.
My solution was to change the merge order of the props, like this:

componentWillReceiveProps(nextProps) {
    if (!isEqual(this.props.initialValues, nextProps.initialValues)) {
        this.setState(prevState => ({
            values: { ...prevState.values, ...nextProps.initialValues }
        }))
    }
}

What do you think?

(I'm sorry for the English, it's not my native language.)

[hnordt]

Hum, yeah, it's a bug, but that's not the correct fix.

Say for example the form mounted with the following initialValues:

{ name: 'Héliton', age: '26' }

Then the user changed age to 27:

{ name: 'Héliton', age: '27' }

For some reason, you change initialValues to:

{ name: 'Harry', age: '28' }

From my point of view, as name is not dirty, it should be changed to Harry, and age should remain 27, because it's dirty, the user changed it.

In a nutshell, when you update initialValues only pristine values should receive the update.

What do you think?

[npsouza]

Yes, it makes sense. So what is the solution to this bug?

[hnordt]

Probably something like:

componentWillReceiveProps(nextProps) {
  if (isEqual(nextProps.initialValues, this.props.initialValues)) {
    return
  }
  this.setState(prevState => {
    const dirtyValues = (
      Object.keys(prevState.values)
        .filter((path) => this.isDirty(path))
        .reduce((result, path) => ({
          ...result,
          [path]: prevState.values[path],
        }), {})
    )
    return {
      values: {
        ...nextProps.initialValues, 
        ...dirtyValues,
      }
    }
  })
}

Can you test please?

[hnordt]

Please test with deep paths too, e.g. a.deep.path[0].foo.bar