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( +
+ )} + , + ); + + 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,