Field name and value not in sync when changing field name

What is the current behavior?

React final form does not swtiche values when field name is dynamically changed during component life, for example if we have:

const { input: { value } } = useField(name)

Imagine name is coming from props and can be dynamically changed.

Initial form state: { a: 1, b: 2 }

Renders:

1. props { name: 'a' }, input: { value: 1 }
2. props { name: 'b' } input: { value: 1 } - changed the field name, value is still stale
3. props { name: 'b' } input: { value: 2 } - in next rerender name and value are in sync

So the case can exist where the source changed but the value is still from previous source.

This can break any component that expects specific value for specific source. And can also introduce wrong values (for example during auto save).

What is the expected behavior?

Renders:

1. props { name: ‘a’ }, input: { value: 1 }
2. props { name: ‘b’ } input: { value: 2 } - name and value are in sync in first render after name change
3. props { name: ‘b’ } input: { value: 2 } - …

Sandbox Link

https://codesandbox.io/s/final-form-field-name-and-value-not-in-sync-when-changing-field-name-okbtn

Click the button to change field name from a to b and watch console for output.

What’s your environment?

"react": "16.13.1",
"react-final-form": "6.4.0",
"final-form": "4.19.1"

Any OS/Browser.

[ruscoder]

I also encountered this issue. Workaround for now - specify key={fieldName} attribute in the parent component.

[gbiryukov]

also facing this issue on most recent versions.

it happens because useField returns same name as it receives from props while related value comes from state that is updated in effect after name change.

possible solution is to have second version of name also in state and update it synchronously with value. this way hook can return values in sync