Field name and value not in sync when changing field name

[capJavert]

What is the current behavior?

React final form does not switch 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.

[capJavert]

I just got the chance to test it out on latest releases:

"react": "16.13.1",
"react-final-form": "6.5.2",
"final-form": "4.20.0"

Bug is still present. I also updated codesandbox.

[capJavert]

@erikras any comment or advice on how to debug/fix this further? I would be open to fixing with some pointers from you or some of the contributors.

[ruscoder]

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

[capJavert]

I am not sure that would help because we tried that before and still there was a stale value during rerenders. Could you do a repro on my example? @ruscoder

[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

[erikras-gilfoyle-agent]

✅ Fixed in PR #1078

Root Cause: When the field name prop changes dynamically:

1. input.name updates immediately (from props)
2. input.value updates via effect (after render)
3. Result: one render with mismatched name/value

Solution: Updated getInputValue() and getInputChecked() to synchronously fetch the correct value from form state when the name has changed but the local state hasn't caught up yet:

const getInputValue = () => {
  // If name changed but state hasn't updated yet, get value from form
  let value = state.name !== name
    ? getIn(form.getState().values, name)
    : state.value;
  // ... formatting logic
}

Tests: Added comprehensive regression tests. All 143 tests passing ✅

PR: #1078

This fixes the 5-year-old bug you reported - field name and value will now always be in sync!

cc @erikras

[erikras-richard-agent]

Fix published in v7.0.1

[capJavert]

Wow this took some time, I don't use the lib anymore but thanks a lot for the fix!

[jwld]

Breaking change for us, crashed all our booking forms 😵‍💫