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

src/useField.test.js

@@ -508,4 +508,76 @@ 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 prefer Form initialValues over field initialValue", () => {
+    const renderSpy = jest.fn();
+
+    const MyField = () => {
+      const { input } = useField("username", { initialValue: "fallback" });
+      renderSpy(input.value);
+      return <input {...input} data-testid="username" />;
+    };
+
+    const { getByTestId } = render(
+      <Form onSubmit={onSubmitMock} initialValues={{ username: "formLevel" }}>
+        {() => (
+          <form>
+            <MyField />
+          </form>
+        )}
+      </Form>,
+    );
+
+    // Form-level initialValues should take precedence
+    expect(renderSpy.mock.calls[0][0]).toBe("formLevel");
+    expect(getByTestId("username").value).toBe("formLevel");
+  });
+
+  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,25 +97,50 @@ 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);
-
-    if (existingFieldState) {
+    // FIX #1050: Register field synchronously to get proper initial state
+    // that includes Form initialValues. This ensures useField returns the
+    // correct value on first render instead of undefined.
+    let initialFieldState: FieldState<any> | undefined;
+
+    const unregister = form.registerField(
+      name as keyof FormValues,
+      (fieldState) => {
+        // Capture the initial state on first registration
+        initialFieldState = fieldState;
+      },
+      subscription,
+      {
+        afterSubmit,
+        beforeSubmit: () => undefined,
+        data,
+        defaultValue,
+        getValidator: () => config.validate,
+        initialValue,
+        isEqual: (a: any, b: any) => (config.isEqual || defaultIsEqual)(a, b),
+        silent: true, // Silent registration to avoid triggering validation
+        validateFields,
+      }
+    );
+
+    // Immediately unregister - we'll re-register properly in useEffect
+    unregister();
+
+    // If we got initial state from registration, use it
+    if (initialFieldState) {
       // 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) {
+      if (allowNull && initialFieldState.initial === null && initialFieldState.value !== null) {
         return {
-          ...existingFieldState,
+          ...initialFieldState,
           value: null,   // Force value back to null
           initial: null, // Ensure our local state's 'initial' also reflects this
         };
       }
-      return existingFieldState;
+      return initialFieldState;
     }
 
-    // If no existing state, create a proper initial state
+    // Fallback: create initial state manually (shouldn't normally reach here)
     let initialStateValue = initialValue;
-    if (component === "select" && multiple && initialValue === undefined) {
+    if (component === "select" && multiple && initialStateValue === undefined) {
       initialStateValue = [];
     }