From a630a209be62cb13d81db4e9c377287e1b39d9c1 Mon Sep 17 00:00:00 2001
From: Erik Rasmussen <erik@mini.local>
Date: Mon, 16 Feb 2026 14:34:21 +0100
Subject: [PATCH] Fix: Prevent field name from shadowing DOM properties (fixes
 #871)

- 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'
---
 src/Field.test.js | 39 +++++++++++++++++++++++++++++++++++++++
 src/Field.tsx     |  9 +++++----
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/Field.test.js b/src/Field.test.js
index 87435f8..fa3da45 100644
--- a/src/Field.test.js
+++ b/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),
+    );
+  });
+});
diff --git a/src/Field.tsx b/src/Field.tsx
index e72448f..d86f859 100644
--- a/src/Field.tsx
+++ b/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,