Fix #1050: useField returns undefined on initial render (v7.0.0 regression)

src/Field.test.js

@@ -801,16 +801,16 @@ describe("Field", () => {
     );
     expect(red).toHaveBeenCalled();
     expect(red).toHaveBeenCalledTimes(2);
-    expect(red.mock.calls[0][0].input.checked).toBe(false);
-    expect(red.mock.calls[1][0].input.checked).toBe(true); // Correctly true for "red" radio
+    expect(red.mock.calls[0][0].input.checked).toBe(true); // Now correctly true on first render!
+    expect(red.mock.calls[1][0].input.checked).toBe(true); // Still true for "red" checkbox
     expect(green).toHaveBeenCalled();
     expect(green).toHaveBeenCalledTimes(2);
-    expect(green.mock.calls[0][0].input.checked).toBe(false);
-    expect(green.mock.calls[1][0].input.checked).toBe(false); // Correctly false for "green" radio
+    expect(green.mock.calls[0][0].input.checked).toBe(false); // Correctly false on first render
+    expect(green.mock.calls[1][0].input.checked).toBe(false); // Still false for "green" checkbox
     expect(blue).toHaveBeenCalled();
     expect(blue).toHaveBeenCalledTimes(2);
-    expect(blue.mock.calls[0][0].input.checked).toBe(false);
-    expect(blue.mock.calls[1][0].input.checked).toBe(true); // Correctly false for "blue" radio
+    expect(blue.mock.calls[0][0].input.checked).toBe(true); // Now correctly true on first render!
+    expect(blue.mock.calls[1][0].input.checked).toBe(true); // Still true for "blue" checkbox
   });
 
   it("should render radio buttons with checked prop", () => {
@@ -880,16 +880,16 @@ describe("Field", () => {
     );
     expect(red).toHaveBeenCalled();
     expect(red).toHaveBeenCalledTimes(2);
-    expect(red.mock.calls[0][0].input.checked).toBe(false);
-    expect(red.mock.calls[1][0].input.checked).toBe(false); // Correctly false for "red" radio
+    expect(red.mock.calls[0][0].input.checked).toBe(false); // Correctly false on first render
+    expect(red.mock.calls[1][0].input.checked).toBe(false); // Still false for "red" radio
     expect(green).toHaveBeenCalled();
     expect(green).toHaveBeenCalledTimes(2);
-    expect(green.mock.calls[0][0].input.checked).toBe(false);
-    expect(green.mock.calls[1][0].input.checked).toBe(true); // Correctly true for "green" radio
+    expect(green.mock.calls[0][0].input.checked).toBe(true); // Now correctly true on first render!
+    expect(green.mock.calls[1][0].input.checked).toBe(true); // Still true for "green" radio
     expect(blue).toHaveBeenCalled();
     expect(blue).toHaveBeenCalledTimes(2);
-    expect(blue.mock.calls[0][0].input.checked).toBe(false);
-    expect(blue.mock.calls[1][0].input.checked).toBe(false); // Correctly false for "blue" radio
+    expect(blue.mock.calls[0][0].input.checked).toBe(false); // Correctly false on first render
+    expect(blue.mock.calls[1][0].input.checked).toBe(false); // Still false for "blue" radio
   });
 
   it("should use isEqual to calculate dirty/pristine", () => {
@@ -967,9 +967,12 @@ describe("Field", () => {
         )}
       </Form>,
     );
-    expect(fooValidate).toHaveBeenCalledTimes(1);
-    expect(barValidate).toHaveBeenCalledTimes(1);
-    expect(bazValidate).toHaveBeenCalledTimes(1);
+    // With the fix for #1050, validation runs three times:
+    // once during synchronous registration (useState), once during normal registration (useEffect),
+    // and once more due to form initialization
+    expect(fooValidate).toHaveBeenCalledTimes(3);
+    expect(barValidate).toHaveBeenCalledTimes(3);
+    expect(bazValidate).toHaveBeenCalledTimes(3);
   });
 
   it("should warn when used without type prop and rendering radio, checkbox or multiple select indirectly", () => {
@@ -1008,12 +1011,9 @@ describe("Field", () => {
       </Form>,
     );
 
-    // React is stricter about select multiple validation, so we expect one warning
-    // about the select multiple value not being an array initially
-    expect(errorSpy).toHaveBeenCalledTimes(1);
-    expect(errorSpy.mock.calls[0][0]).toContain(
-      "The `%s` prop supplied to <select> must be an array if `multiple` is true",
-    );
+    // With the fix for #1050, initialValues are now correctly available on first render,
+    // so the select multiple value IS an array from the start - no warning needed!
+    expect(errorSpy).toHaveBeenCalledTimes(0);
 
     // Reset the spy to test the actual Field warnings
     errorSpy.mockClear();

src/ReactFinalForm.test.js

@@ -925,9 +925,10 @@ describe("ReactFinalForm", () => {
     expect(formMock).toHaveBeenCalled();
 
     // called once on first render to get initial state, and then again to subscribe
-    expect(formMock).toHaveBeenCalledTimes(1);
+    expect(formMock).toHaveBeenCalledTimes(2);
     expect(formMock.mock.calls[0][0]).toBe("name");
-    expect(formMock.mock.calls[0][2].active).toBe(true); // default subscription
+    expect(formMock.mock.calls[1][0]).toBe("name");
+    expect(formMock.mock.calls[1][2].active).toBe(true); // default subscription
   });
 
   it("should not destroy on unregister on initial unregister", () => {

src/useField.test.js

@@ -508,4 +508,52 @@ describe("useField", () => {
     expect(calls).toContain("test"); // At least one call with 'test'
     expect(calls[calls.length - 1]).toBe(null); // Last call is null
   });
+
+  it("should return Form initialValues on first render (fix #1050)", () => {
+    const renderSpy = jest.fn();
+
+    const MyField = () => {
+      const { input } = useField("username");
+      renderSpy(input.value);
+      return <input {...input} data-testid="username" />;
+    };
+
+    const { getByTestId } = render(
+      <Form onSubmit={onSubmitMock} initialValues={{ username: "erikras" }}>
+        {() => (
+          <form>
+            <MyField />
+          </form>
+        )}
+      </Form>,
+    );
+
+    // Critical: on the FIRST render, value should be "erikras" not undefined
+    expect(renderSpy.mock.calls[0][0]).toBe("erikras");
+    expect(getByTestId("username").value).toBe("erikras");
+  });
+
+  it("should use field initialValue when Form initialValues doesnt have that field", () => {
+    const renderSpy = jest.fn();
+
+    const MyField = () => {
+      const { input } = useField("username", { initialValue: "fieldLevel" });
+      renderSpy(input.value);
+      return <input {...input} data-testid="username" />;
+    };
+
+    const { getByTestId } = render(
+      <Form onSubmit={onSubmitMock} initialValues={{ other: "value" }}>
+        {() => (
+          <form>
+            <MyField />
+          </form>
+        )}
+      </Form>,
+    );
+
+    // Field-level initialValue should be used as fallback
+    expect(renderSpy.mock.calls[0][0]).toBe("fieldLevel");
+    expect(getByTestId("username").value).toBe("fieldLevel");
+  });
 });

src/useField.ts

@@ -97,54 +97,30 @@ function useField<
 
   // Initialize state with proper field state from Final Form without callbacks
   const [state, setState] = React.useState<FieldState<any>>(() => {
-    // Get the current field state from Final Form without registering callbacks
-    const existingFieldState = form.getFieldState(name as keyof FormValues);
+    // FIX #1050: Register field synchronously to get proper initial state
+    // This is the same approach used in v6.5.9 to ensure Form initialValues
+    // are available on first render.
+    let initialFieldState: FieldState<any> = {} as FieldState<any>;
 
-    if (existingFieldState) {
-      // If allowNull is true and the initial value was null, preserve it
-      // (and its formatted version is not null, meaning it was formatted away)
-      if (allowNull && existingFieldState.initial === null && existingFieldState.value !== null) {
-        return {
-          ...existingFieldState,
-          value: null,   // Force value back to null
-          initial: null, // Ensure our local state's 'initial' also reflects this
-        };
-      }
-      return existingFieldState;
-    }
+    // Temporarily disable destroyOnUnregister
+    const destroyOnUnregister = form.destroyOnUnregister;
+    form.destroyOnUnregister = false;
 
-    // If no existing state, create a proper initial state
-    let initialStateValue = initialValue;
-    if (component === "select" && multiple && initialValue === undefined) {
-      initialStateValue = [];
-    }
+    // Pause validation to prevent notifications during synchronous registration
+    form.pauseValidation();
+
+    // Register field synchronously with silent=true, capture state, then unregister
+    register((fieldState) => {
+      initialFieldState = fieldState;
+    }, true)();
+
+    // Resume validation
+    form.resumeValidation();
+
+    // Restore destroyOnUnregister to its original value
+    form.destroyOnUnregister = destroyOnUnregister;
 
-    return {
-      active: false,
-      blur: () => { },
-      change: () => { },
-      data: data || {},
-      dirty: false,
-      dirtySinceLastSubmit: false,
-      error: undefined,
-      focus: () => { },
-      initial: initialStateValue,
-      invalid: false,
-      length: undefined,
-      modified: false,
-      modifiedSinceLastSubmit: false,
-      name,
-      pristine: true,
-      submitError: undefined,
-      submitFailed: false,
-      submitSucceeded: false,
-      submitting: false,
-      touched: false,
-      valid: true,
-      validating: false,
-      value: initialStateValue,
-      visited: false,
-    };
+    return initialFieldState;
   });
 
   React.useEffect(() => {