Merge remote-tracking branch 'origin/main' into fix-869-dynamic-field-name

Author: erikras-dinesh-agent

src/Field.test.js

@@ -1338,3 +1338,42 @@ describe("Field", () => {
     expect(getByTestId("thirty").checked).toBe(true);
   });
 });
+
+describe("Field.nodeName issue #871", () => {
+  it("should not crash when field name is 'nodeName'", () => {
+    const onSubmit = jest.fn();
+    const { getByTestId } = render(
+      <Form onSubmit={onSubmit}>
+        {({ handleSubmit }) => (
+          <form onSubmit={handleSubmit}>
+            <Field
+              name="nodeName"
+              component="input"
+              data-testid="nodeName-input"
+            />
+            <button type="submit" data-testid="submit">
+              Submit
+            </button>
+          </form>
+        )}
+      </Form>,
+    );
+
+    const input = getByTestId("nodeName-input");
+    const submit = getByTestId("submit");
+
+    // Should not crash when interacting with the field
+    expect(() => {
+      fireEvent.change(input, { target: { value: "test" } });
+      fireEvent.blur(input);
+      fireEvent.click(submit);
+    }).not.toThrow();
+
+    // Verify the field value was set correctly
+    expect(onSubmit).toHaveBeenCalledWith(
+      { nodeName: "test" },
+      expect.any(Object),
+      expect.any(Function),
+    );
+  });
+});

src/Field.tsx

@@ -68,19 +68,20 @@ function FieldComponent<
 
   if (typeof component === "string") {
     // ignore meta, combine input with any other props
-    const inputProps = { ...mergedField.input };
+    const { name: inputName, ...restInputProps } = mergedField.input;
 
     // Ensure multiple select has array value
     if (
       component === "select" &&
       multiple &&
-      !Array.isArray(inputProps.value)
+      !Array.isArray(restInputProps.value)
     ) {
-      inputProps.value = [] as any;
+      restInputProps.value = [] as any;
     }
 
     return React.createElement(component, {
-      ...inputProps,
+      name: inputName, // Pass name explicitly to avoid shadowing DOM properties
+      ...restInputProps,
       children,
       ref,
       ...rest,

src/useFormState.ts

@@ -14,20 +14,32 @@ function useFormState<FormValues = Record<string, any>>({
   const onChangeRef = React.useRef(onChange);
   onChangeRef.current = onChange;
 
-  // Initialize state with current form state without callbacks
-  const [state, setState] = React.useState<FormState<FormValues>>(() => {
-    // Get initial state synchronously but without callbacks
-    return form.getState();
-  });
+  // Initialize with current form state WITHOUT triggering callbacks during render.
+  // We intentionally use getState() here so render-prop consumers (e.g. <FormSpy>{...})
+  // can read a fully-populated initial state on first render.
+  const [state, setState] = React.useState<FormState<FormValues>>(() =>
+    form.getState(),
+  );
+
+  // We want `onChange` to be called AFTER render (fixes #809) and only with the
+  // subscription-filtered state.
+  const firstSubscriptionRef = React.useRef(true);
+  const pendingOnChangeRef = React.useRef<FormState<FormValues> | null>(null);
+  const lastOnChangeRef = React.useRef<FormState<FormValues> | null>(null);
 
   React.useEffect(() => {
-    // Subscribe to form state changes after initial render
     const unsubscribe = form.subscribe((newState) => {
+      // Ensure we set state at least once from the subscription, even if equal,
+      // so that `onChange` can be fired from an effect after the first render.
+      const isFirst = firstSubscriptionRef.current;
+      if (isFirst) {
+        firstSubscriptionRef.current = false;
+      }
+
+      pendingOnChangeRef.current = newState;
+
       setState((prevState) => {
-        if (!shallowEqual(newState, prevState)) {
-          if (onChangeRef.current) {
-            onChangeRef.current(newState);
-          }
+        if (isFirst || !shallowEqual(newState, prevState)) {
           return newState;
         }
         return prevState;
@@ -38,6 +50,23 @@ function useFormState<FormValues = Record<string, any>>({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  React.useEffect(() => {
+    const pending = pendingOnChangeRef.current;
+    if (!pending || !onChangeRef.current) {
+      return;
+    }
+
+    // Only fire when the subscription has produced a new state and it differs
+    // from what we've already emitted.
+    if (lastOnChangeRef.current === null || !shallowEqual(pending, lastOnChangeRef.current)) {
+      onChangeRef.current(pending);
+      lastOnChangeRef.current = pending;
+    }
+
+    // Clear pending once we've handled it.
+    pendingOnChangeRef.current = null;
+  }, [state]);
+
   const lazyState = {};
   addLazyFormState(lazyState, state);
   return lazyState as FormState<FormValues>;