From 946f65baed94758928c2bde1cfdc982044146871 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=C9=A8=D5=BC=C9=A2=D3=84=D5=A1=D6=85=D5=BC=C9=A2?= Date: Fri, 19 Apr 2024 11:46:27 +0800 Subject: [PATCH 1/8] feat(input): add @nextui-org/use-safe-layout-effect --- packages/components/input/package.json | 1 + pnpm-lock.yaml | 3 +++ 2 files changed, 4 insertions(+) diff --git a/packages/components/input/package.json b/packages/components/input/package.json index 0f1f42c7de..3d0abec4e1 100644 --- a/packages/components/input/package.json +++ b/packages/components/input/package.json @@ -43,6 +43,7 @@ "@nextui-org/react-utils": "workspace:*", "@nextui-org/shared-icons": "workspace:*", "@nextui-org/shared-utils": "workspace:*", + "@nextui-org/use-safe-layout-effect": "workspace:*", "@react-aria/focus": "^3.16.2", "@react-aria/interactions": "^3.21.1", "@react-aria/textfield": "^3.14.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 99a53b83ff..4730f249fd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1523,6 +1523,9 @@ importers: '@nextui-org/shared-utils': specifier: workspace:* version: link:../../utilities/shared-utils + '@nextui-org/use-safe-layout-effect': + specifier: workspace:* + version: link:../../hooks/use-safe-layout-effect '@react-aria/focus': specifier: ^3.16.2 version: 3.16.2(react@18.2.0) From 44ccc8ca9f6038485e69b4794cd082499871cfec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=C9=A8=D5=BC=C9=A2=D3=84=D5=A1=D6=85=D5=BC=C9=A2?= Date: Fri, 19 Apr 2024 12:03:25 +0800 Subject: [PATCH 2/8] fix(input): use useSafeLayoutEffect to handle react-hook-form case --- packages/components/input/src/use-input.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/components/input/src/use-input.ts b/packages/components/input/src/use-input.ts index b3704f485a..32b61841b3 100644 --- a/packages/components/input/src/use-input.ts +++ b/packages/components/input/src/use-input.ts @@ -2,6 +2,7 @@ import type {InputVariantProps, SlotsToClasses, InputSlots} from "@nextui-org/th import type {AriaTextFieldOptions} from "@react-aria/textfield"; import {HTMLNextUIProps, mapPropsVariants, PropGetter} from "@nextui-org/system"; +import {useSafeLayoutEffect} from "@nextui-org/use-safe-layout-effect"; import {AriaTextFieldProps} from "@react-types/textfield"; import {useFocusRing} from "@react-aria/focus"; import {input} from "@nextui-org/theme"; @@ -143,6 +144,15 @@ export function useInput { + if (!domRef.current) return; + + setInputValue(domRef.current.value); + }, [domRef.current]); + const { labelProps, inputProps, @@ -156,7 +166,7 @@ export function useInput Date: Fri, 19 Apr 2024 12:03:42 +0800 Subject: [PATCH 3/8] feat(input): add isClearable test case --- .../components/input/__tests__/input.test.tsx | 31 ++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/packages/components/input/__tests__/input.test.tsx b/packages/components/input/__tests__/input.test.tsx index d00bd400c0..acd5e1860c 100644 --- a/packages/components/input/__tests__/input.test.tsx +++ b/packages/components/input/__tests__/input.test.tsx @@ -1,5 +1,6 @@ import * as React from "react"; -import {render} from "@testing-library/react"; +import {act, render} from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; import {Input} from "../src"; @@ -116,4 +117,32 @@ describe("Input", () => { expect(ref.current?.value)?.toBe(value); }); + + it("should clear the value and onClear is triggered", async () => { + const onClear = jest.fn(); + + const ref = React.createRef(); + + const {container} = render( + , + ); + + const clearButton = container.querySelector("[data-slot='clear-button']") as HTMLElement; + + expect(clearButton).not.toBeNull(); + + await act(async () => { + await userEvent.click(clearButton); + }); + + expect(ref.current?.value)?.toBe(""); + + expect(onClear).toHaveBeenCalledTimes(1); + }); }); From 86d05ae2f98c8dd8ea807424e48e7c59cdd7ca0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=C9=A8=D5=BC=C9=A2=D3=84=D5=A1=D6=85=D5=BC=C9=A2?= Date: Fri, 19 Apr 2024 12:04:09 +0800 Subject: [PATCH 4/8] feat(input): add react-hook-form to dev dependencies for storybook --- packages/components/input/package.json | 3 ++- pnpm-lock.yaml | 3 +++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/components/input/package.json b/packages/components/input/package.json index 3d0abec4e1..eeb1737f0c 100644 --- a/packages/components/input/package.json +++ b/packages/components/input/package.json @@ -58,7 +58,8 @@ "@nextui-org/system": "workspace:*", "clean-package": "2.2.0", "react": "^18.0.0", - "react-dom": "^18.0.0" + "react-dom": "^18.0.0", + "react-hook-form": "^7.51.3" }, "clean-package": "../../../clean-package.config.json" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4730f249fd..f702bf08cc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1566,6 +1566,9 @@ importers: react-dom: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) + react-hook-form: + specifier: ^7.51.3 + version: 7.51.3(react@18.2.0) packages/components/kbd: dependencies: From 6b1d451bb7e08d8f1c0723dd2f68e10f3d6ccd01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=C9=A8=D5=BC=C9=A2=D3=84=D5=A1=D6=85=D5=BC=C9=A2?= Date: Fri, 19 Apr 2024 12:05:45 +0800 Subject: [PATCH 5/8] feat(input): add WithReactHookForm to input storybook --- .../input/stories/input.stories.tsx | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/packages/components/input/stories/input.stories.tsx b/packages/components/input/stories/input.stories.tsx index 4cf404410d..73245b0292 100644 --- a/packages/components/input/stories/input.stories.tsx +++ b/packages/components/input/stories/input.stories.tsx @@ -13,6 +13,7 @@ import { CloseFilledIcon, } from "@nextui-org/shared-icons"; import {button} from "@nextui-org/theme"; +import {useForm} from "react-hook-form"; import {Input, InputProps, useInput} from "../src"; @@ -474,6 +475,38 @@ const CustomWithHooksTemplate = (args: InputProps) => { ); }; +const WithReactHookFormTemplate = (args: InputProps) => { + const { + register, + formState: {errors}, + handleSubmit, + } = useForm({ + defaultValues: { + withDefaultValue: "wkw", + withoutDefaultValue: "", + requiredField: "", + }, + }); + + const onSubmit = (data: any) => { + // eslint-disable-next-line no-console + console.log(data); + alert("Submitted value: " + JSON.stringify(data)); + }; + + return ( +
+ + + + {errors.requiredField && This field is required} + +
+ ); +}; + export const Default = { render: MirrorTemplate, @@ -706,3 +739,11 @@ export const CustomWithHooks = { ), }, }; + +export const WithReactHookForm = { + render: WithReactHookFormTemplate, + + args: { + ...defaultProps, + }, +}; From 6ea3b7c5b7c50acf0c1fc6ac39d7b70dcb902b76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=C9=A8=D5=BC=C9=A2=D3=84=D5=A1=D6=85=D5=BC=C9=A2?= Date: Fri, 19 Apr 2024 12:07:36 +0800 Subject: [PATCH 6/8] feat(changeset): fixes isClearable function in input --- .changeset/gold-dolphins-fail.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/gold-dolphins-fail.md diff --git a/.changeset/gold-dolphins-fail.md b/.changeset/gold-dolphins-fail.md new file mode 100644 index 0000000000..747496c43b --- /dev/null +++ b/.changeset/gold-dolphins-fail.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/input": patch +--- + +Fixes isClearable function in input (#2791) From b53db666aa8200489d118eabcc23bc33c9ef6469 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=C9=A8=D5=BC=C9=A2=D3=84=D5=A1=D6=85=D5=BC=C9=A2?= Date: Sun, 21 Apr 2024 16:11:11 +0800 Subject: [PATCH 7/8] chore(changeset): update changeset message --- .changeset/gold-dolphins-fail.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/gold-dolphins-fail.md b/.changeset/gold-dolphins-fail.md index 747496c43b..e16788bb22 100644 --- a/.changeset/gold-dolphins-fail.md +++ b/.changeset/gold-dolphins-fail.md @@ -2,4 +2,4 @@ "@nextui-org/input": patch --- -Fixes isClearable function in input (#2791) +Fixes the isClearable function in the input component (#2791) From fde03c2ee66e7ec08fa1da3af326bbcc8aa345a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D5=A1=C9=A8=D5=BC=C9=A2=D3=84=D5=A1=D6=85=D5=BC=C9=A2?= Date: Mon, 22 Apr 2024 23:03:22 +0800 Subject: [PATCH 8/8] refactor(input): revise input test --- packages/components/input/__tests__/input.test.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/components/input/__tests__/input.test.tsx b/packages/components/input/__tests__/input.test.tsx index acd5e1860c..d9ab83d694 100644 --- a/packages/components/input/__tests__/input.test.tsx +++ b/packages/components/input/__tests__/input.test.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import {act, render} from "@testing-library/react"; +import {render} from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import {Input} from "../src"; @@ -123,7 +123,7 @@ describe("Input", () => { const ref = React.createRef(); - const {container} = render( + const {getByRole} = render( { />, ); - const clearButton = container.querySelector("[data-slot='clear-button']") as HTMLElement; + const clearButton = getByRole("button"); expect(clearButton).not.toBeNull(); - await act(async () => { - await userEvent.click(clearButton); - }); + const user = userEvent.setup(); + + await user.click(clearButton); expect(ref.current?.value)?.toBe("");