From faacd6be5349b774083c0b48f2ade93ff7063fb0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EB=8F=84=EB=A5=9C?= <88328436+ryxxn@users.noreply.github.com> Date: Mon, 12 Aug 2024 18:36:40 +0900 Subject: [PATCH 1/7] fix(input): prevent clearable when input is readonly --- packages/components/input/src/use-input.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/input/src/use-input.ts b/packages/components/input/src/use-input.ts index 0cc2102725..e52fc5d97f 100644 --- a/packages/components/input/src/use-input.ts +++ b/packages/components/input/src/use-input.ts @@ -245,7 +245,7 @@ export function useInput Date: Mon, 12 Aug 2024 20:18:59 +0900 Subject: [PATCH 2/7] test(input): add tests for isReadOnly and isClearable interaction --- .../components/input/__tests__/input.test.tsx | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/components/input/__tests__/input.test.tsx b/packages/components/input/__tests__/input.test.tsx index 043de2da6e..f9c7315f74 100644 --- a/packages/components/input/__tests__/input.test.tsx +++ b/packages/components/input/__tests__/input.test.tsx @@ -180,6 +180,26 @@ describe("Input", () => { expect(inputs[1]).toBeVisible(); }); + + it("should not show clear button when isReadOnly is true", () => { + const {queryByRole} = render( + , + ); + + const clearButton = queryByRole("button"); + + expect(clearButton).toBeNull(); + }); + + it("should show clear button when isReadOnly is false", () => { + const {getByRole} = render( + , + ); + + const clearButton = getByRole("button"); + + expect(clearButton).not.toBeNull(); + }); }); describe("Input with React Hook Form", () => { From b06b0795667e93d2f84bcd11f14121fd0cb126d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EB=8F=84=EB=A5=9C?= <88328436+ryxxn@users.noreply.github.com> Date: Mon, 12 Aug 2024 20:22:52 +0900 Subject: [PATCH 3/7] chore(changeset): add changeset for fixing clear button visibility with isReadOnly --- .changeset/soft-wombats-wash.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/soft-wombats-wash.md diff --git a/.changeset/soft-wombats-wash.md b/.changeset/soft-wombats-wash.md new file mode 100644 index 0000000000..3f7c360c44 --- /dev/null +++ b/.changeset/soft-wombats-wash.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/input": patch +--- + +Fix issue where clear button is shown when input is read-only From 3061744d5dad1bfc6d714e00615ea0110b1bbce9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EB=8F=84=EB=A5=9C?= <88328436+ryxxn@users.noreply.github.com> Date: Tue, 13 Aug 2024 16:30:40 +0900 Subject: [PATCH 4/7] fix(input): disable clear button from input is readonly --- packages/components/input/src/use-input.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/input/src/use-input.ts b/packages/components/input/src/use-input.ts index e52fc5d97f..51f6844c83 100644 --- a/packages/components/input/src/use-input.ts +++ b/packages/components/input/src/use-input.ts @@ -214,7 +214,7 @@ export function useInput Date: Tue, 13 Aug 2024 16:37:25 +0900 Subject: [PATCH 5/7] test(input): disable clear button when input is readonly --- .../components/input/__tests__/input.test.tsx | 27 ++++++++++++------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/packages/components/input/__tests__/input.test.tsx b/packages/components/input/__tests__/input.test.tsx index f9c7315f74..23859a06d5 100644 --- a/packages/components/input/__tests__/input.test.tsx +++ b/packages/components/input/__tests__/input.test.tsx @@ -181,24 +181,31 @@ describe("Input", () => { expect(inputs[1]).toBeVisible(); }); - it("should not show clear button when isReadOnly is true", () => { - const {queryByRole} = render( - , - ); - - const clearButton = queryByRole("button"); + it("should disable clear button when isReadOnly is true", async () => { + const onClear = jest.fn(); - expect(clearButton).toBeNull(); - }); + const ref = React.createRef(); - it("should show clear button when isReadOnly is false", () => { const {getByRole} = render( - , + , ); const clearButton = getByRole("button"); expect(clearButton).not.toBeNull(); + + const user = userEvent.setup(); + + await user.click(clearButton); + + expect(onClear).toHaveBeenCalledTimes(0); }); }); From 125ab66381a91938bd8cdf84ebba1a1d47aa9e36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EB=8F=84=EB=A5=9C?= <88328436+ryxxn@users.noreply.github.com> Date: Tue, 13 Aug 2024 16:38:38 +0900 Subject: [PATCH 6/7] chore(changeset): update changeset --- .changeset/soft-wombats-wash.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/soft-wombats-wash.md b/.changeset/soft-wombats-wash.md index 3f7c360c44..7c4d1b4e15 100644 --- a/.changeset/soft-wombats-wash.md +++ b/.changeset/soft-wombats-wash.md @@ -2,4 +2,4 @@ "@nextui-org/input": patch --- -Fix issue where clear button is shown when input is read-only +Fix issue where clear button is disabled when input is read-only. From 87ae28bbe1b9c348edb562453080989deb441104 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Tue, 13 Aug 2024 16:39:48 +0800 Subject: [PATCH 7/7] chore(changeset): revise message --- .changeset/soft-wombats-wash.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/soft-wombats-wash.md b/.changeset/soft-wombats-wash.md index 7c4d1b4e15..95ad1a324d 100644 --- a/.changeset/soft-wombats-wash.md +++ b/.changeset/soft-wombats-wash.md @@ -2,4 +2,4 @@ "@nextui-org/input": patch --- -Fix issue where clear button is disabled when input is read-only. +disable clear button when input is read-only