Fix #869: Synchronize field name and value when name changes dynamically

Author: Erik Rasmussen

src/useField.dynamic-name-869.test.tsx

@@ -0,0 +1,97 @@
+/**
+ * @jest-environment jsdom
+ */
+import * as React from 'react'
+import { render, fireEvent, waitFor } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import Form from './ReactFinalForm'
+import Field from './Field'
+import { act } from 'react-dom/test-utils'
+
+describe('useField - Dynamic Name (Issue #869)', () => {
+  it('should keep name and value in sync when field name changes', async () => {
+    const renderSpy = jest.fn()
+    
+    const TestComponent = ({ fieldName }: { fieldName: string }) => {
+      return (
+        <Form
+          onSubmit={() => {}}
+          initialValues={{ a: 'value-a', b: 'value-b' }}
+        >
+          {() => (
+            <Field name={fieldName}>
+              {({ input }) => {
+                // Log every render to track name/value sync
+                renderSpy(input.name, input.value)
+                return <input {...input} data-testid="field" />
+              }}
+            </Field>
+          )}
+        </Form>
+      )
+    }
+
+    const { rerender } = render(<TestComponent fieldName="a" />)
+    
+    // Initial render - field 'a'
+    expect(renderSpy).toHaveBeenCalledWith('a', 'value-a')
+    
+    renderSpy.mockClear()
+    
+    // Change field name from 'a' to 'b'
+    act(() => {
+      rerender(<TestComponent fieldName="b" />)
+    })
+    
+    // BUG: First render after name change has mismatched name/value
+    // We get name='b' but value='value-a' (stale)
+    const calls = renderSpy.mock.calls
+    
+    // The bug manifests as: first call has name='b' but value='value-a'
+    // Expected: ALL calls should have name and value in sync
+    calls.forEach(call => {
+      const [name, value] = call
+      if (name === 'a') {
+        expect(value).toBe('value-a')
+      } else if (name === 'b') {
+        expect(value).toBe('value-b')  // This will FAIL on first render
+      }
+    })
+  })
+
+  it('should have correct value immediately after name change (no stale renders)', async () => {
+    const TestComponent = ({ fieldName }: { fieldName: string }) => {
+      return (
+        <Form
+          onSubmit={() => {}}
+          initialValues={{ a: 'value-a', b: 'value-b' }}
+        >
+          {() => (
+            <Field name={fieldName}>
+              {({ input }) => (
+                <div>
+                  <span data-testid="name">{input.name}</span>
+                  <span data-testid="value">{input.value}</span>
+                </div>
+              )}
+            </Field>
+          )}
+        </Form>
+      )
+    }
+
+    const { rerender, getByTestId } = render(<TestComponent fieldName="a" />)
+    
+    expect(getByTestId('name')).toHaveTextContent('a')
+    expect(getByTestId('value')).toHaveTextContent('value-a')
+    
+    // Change field name
+    act(() => {
+      rerender(<TestComponent fieldName="b" />)
+    })
+    
+    // IMMEDIATELY after rerender, name and value should be in sync
+    expect(getByTestId('name')).toHaveTextContent('b')
+    expect(getByTestId('value')).toHaveTextContent('value-b')  // BUG: This will show 'value-a'
+  })
+})

src/useField.ts

@@ -187,7 +187,11 @@ function useField<
   const meta: any = {};
   addLazyFieldMetaState(meta, state);
   const getInputValue = () => {
-    let value = state.value;
+    // Fix #869: If name changed but state hasn't updated yet (effect hasn't run),
+    // get the value directly from form values to avoid returning stale value
+    let value = state.name !== name
+      ? getIn(form.getState().values, name)
+      : state.value;
 
     // Handle null values first
     if (value === null && !allowNull) {
@@ -221,7 +225,10 @@ function useField<
   };
 
   const getInputChecked = () => {
-    let value = state.value;
+    // Fix #869: Same as getInputValue - sync with current name
+    let value = state.name !== name
+      ? getIn(form.getState().values, name)
+      : state.value;
     if (type === "checkbox") {
       value = parse(value, name);
       if (_value === undefined) {