Fix: Prevent field name from shadowing DOM properties (fixes #871) (#1077)

- Extract 'name' from inputProps before spreading to avoid shadowing
- Fixes crash when field name is 'nodeName', 'className', etc.
- Add test case for field named 'nodeName'

Co-authored-by: Erik Rasmussen <erik@mini.local>

Author: erikras-gilfoyle-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,