diff --git a/.changeset/short-ravens-stare.md b/.changeset/short-ravens-stare.md new file mode 100644 index 000000000..3de09d86d --- /dev/null +++ b/.changeset/short-ravens-stare.md @@ -0,0 +1,5 @@ +--- +"@heroui/number-input": patch +--- + +ignore name prop in getNumberInputProps (#5594) diff --git a/packages/components/number-input/__tests__/number-input.test.tsx b/packages/components/number-input/__tests__/number-input.test.tsx index fb111f6e9..86cdfd0af 100644 --- a/packages/components/number-input/__tests__/number-input.test.tsx +++ b/packages/components/number-input/__tests__/number-input.test.tsx @@ -1,7 +1,7 @@ import type {UserEvent} from "@testing-library/user-event"; import * as React from "react"; -import {render, renderHook, fireEvent, act} from "@testing-library/react"; +import {render, fireEvent, act} from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import {useForm} from "react-hook-form"; import {Form} from "@heroui/form"; @@ -330,59 +330,85 @@ describe("NumberInput", () => { }); describe("NumberInput with React Hook Form", () => { - let input1: HTMLInputElement; - let input2: HTMLInputElement; - let input3: HTMLInputElement; + let hiddenInput1: HTMLInputElement; + let hiddenInput2: HTMLInputElement; + let hiddenInput3: HTMLInputElement; + let visibleInput3: HTMLInputElement; let submitButton: HTMLButtonElement; let onSubmit: () => void; beforeEach(() => { - const {result} = renderHook(() => - useForm({ - defaultValues: { - withDefaultValue: 1234, - withoutDefaultValue: undefined, - requiredField: undefined, - }, - }), - ); - - const { - handleSubmit, - register, - formState: {errors}, - } = result.current; - onSubmit = jest.fn(); - render( -
- - - - {errors.requiredField && This field is required} - - , - ); + function TestForm() { + const { + handleSubmit, + setValue, + watch, + register, + formState: {errors}, + } = useForm<{ + withDefaultValue: number; + withoutDefaultValue?: number; + requiredField?: number; + }>(); - input1 = document.querySelector("input[name=withDefaultValue]")!; - input2 = document.querySelector("input[name=withoutDefaultValue]")!; - input3 = document.querySelector("input[name=requiredField]")!; + React.useEffect(() => { + register("withDefaultValue"); + register("withoutDefaultValue"); + register("requiredField", {required: true}); + }, [register]); + + const requiredFieldValue = watch("requiredField"); + + return ( +
+ setValue("withDefaultValue", value)} + /> + setValue("withoutDefaultValue", value)} + /> + + setValue("requiredField", value, {shouldValidate: true, shouldDirty: true}) + } + /> + {errors.requiredField && This field is required} + + + ); + } + + const {getByTestId} = render(); + + hiddenInput1 = document.querySelector("input[name=withDefaultValue][type=hidden]")!; + hiddenInput2 = document.querySelector("input[name=withoutDefaultValue][type=hidden]")!; + hiddenInput3 = document.querySelector("input[name=requiredField][type=hidden]")!; + visibleInput3 = getByTestId("input-3") as HTMLInputElement; submitButton = document.querySelector('button[type="submit"]')!; }); it("should work with defaultValues", () => { - expect(input1).toHaveValue("1234"); - expect(input2).not.toHaveValue(); - expect(input3).not.toHaveValue(); + expect(hiddenInput1).toHaveValue("1234"); + expect(hiddenInput2).not.toHaveValue(); + expect(hiddenInput3).not.toHaveValue(); + + expect(document.querySelectorAll('input[name="requiredField"]')).toHaveLength(1); + expect(visibleInput3).not.toHaveAttribute("name"); + expect(hiddenInput3).toHaveAttribute("name", "requiredField"); }); it("should not submit form when required field is empty", async () => { @@ -394,10 +420,13 @@ describe("NumberInput with React Hook Form", () => { }); it("should submit form when required field is not empty", async () => { - fireEvent.change(input3, {target: {value: 123}}); - const user = userEvent.setup(); + await user.click(visibleInput3); + await user.keyboard("123"); + + expect(hiddenInput3).toHaveValue("123"); + await user.click(submitButton); expect(onSubmit).toHaveBeenCalledTimes(1); diff --git a/packages/components/number-input/src/use-number-input.ts b/packages/components/number-input/src/use-number-input.ts index fe9be28e0..fb4d48146 100644 --- a/packages/components/number-input/src/use-number-input.ts +++ b/packages/components/number-input/src/use-number-input.ts @@ -334,7 +334,7 @@ export function useNumberInput(originalProps: UseNumberInputProps) { enabled: true, labelable: true, omitEventNames: new Set(Object.keys(inputProps)), - omitPropNames: new Set(["value"]), + omitPropNames: new Set(["value", "name"]), }), props, ),