From f5ad50362898ba3a7c3346e499e9fd36239b7750 Mon Sep 17 00:00:00 2001 From: Abhinav Agarwal Date: Fri, 20 Sep 2024 20:36:36 +0530 Subject: [PATCH 1/6] fix: add state.open() so that dropdown is not closed --- packages/components/autocomplete/src/use-autocomplete.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/components/autocomplete/src/use-autocomplete.ts b/packages/components/autocomplete/src/use-autocomplete.ts index d1cae053f3..b6a9cae1ab 100644 --- a/packages/components/autocomplete/src/use-autocomplete.ts +++ b/packages/components/autocomplete/src/use-autocomplete.ts @@ -385,16 +385,15 @@ export function useAutocomplete(originalProps: UseAutocomplete }, onPress: (e: PressEvent) => { slotsProps.clearButtonProps?.onPress?.(e); - if (state.selectedItem) { state.setInputValue(""); state.setSelectedKey(null); } else { if (allowsCustomValue) { state.setInputValue(""); - state.close(); } } + state.open(); }, "data-visible": !!state.selectedItem || state.inputValue?.length > 0, className: slots.clearButton({ From 9979a79176d0da4d8c039817689093ccb58de61f Mon Sep 17 00:00:00 2001 From: Abhinav Agarwal Date: Fri, 20 Sep 2024 20:53:07 +0530 Subject: [PATCH 2/6] chore: add changeset --- .changeset/dirty-moles-refuse.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/dirty-moles-refuse.md diff --git a/.changeset/dirty-moles-refuse.md b/.changeset/dirty-moles-refuse.md new file mode 100644 index 0000000000..ec0b7708fc --- /dev/null +++ b/.changeset/dirty-moles-refuse.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/autocomplete": minor +--- + +added state.open() and removed state.close() from onPress prop of clear button so that dropdown does not close when clear button is clicked From 10817323dff39fff11249eb094cf55981e415725 Mon Sep 17 00:00:00 2001 From: Abhinav Agarwal Date: Sat, 21 Sep 2024 12:14:35 +0530 Subject: [PATCH 3/6] chore(autocomplete): add testcases for keeping lisbox open when clearButton is clicked --- .../__tests__/autocomplete.test.tsx | 90 +++++++++++++++++++ 1 file changed, 90 insertions(+) diff --git a/packages/components/autocomplete/__tests__/autocomplete.test.tsx b/packages/components/autocomplete/__tests__/autocomplete.test.tsx index ab4f6d381f..d892c82701 100644 --- a/packages/components/autocomplete/__tests__/autocomplete.test.tsx +++ b/packages/components/autocomplete/__tests__/autocomplete.test.tsx @@ -235,6 +235,55 @@ describe("Autocomplete", () => { expect(autocomplete).toHaveFocus(); }); + it("should keep the ListBox open after clicking clear button", async () => { + const wrapper = render( + + + Penguin + + + Zebra + + + Shark + + , + ); + + const autocomplete = wrapper.getByTestId("autocomplete"); + + // open the select listbox + await act(async () => { + await userEvent.click(autocomplete); + }); + + // assert that the autocomplete listbox is open + expect(autocomplete).toHaveAttribute("aria-expanded", "true"); + + let options = wrapper.getAllByRole("option"); + + // select the target item + await act(async () => { + await userEvent.click(options[0]); + }); + + const {container} = wrapper; + + const clearButton = container.querySelector( + "[data-slot='inner-wrapper'] button:nth-of-type(1)", + )!; + + expect(clearButton).not.toBeNull(); + + // select the target item + await act(async () => { + await userEvent.click(clearButton); + }); + + // assert that the autocomplete listbox is open + expect(autocomplete).toHaveAttribute("aria-expanded", "true"); + }); + it("should clear value after clicking clear button (controlled)", async () => { const wrapper = render( @@ -279,6 +328,47 @@ describe("Autocomplete", () => { expect(autocomplete).toHaveFocus(); }); + it("should keep the ListBox open after clicking clear button (controlled)", async () => { + const wrapper = render( + + {(item) => {item.value}} + , + ); + + const autocomplete = wrapper.getByTestId("autocomplete"); + + // open the select listbox + await act(async () => { + await userEvent.click(autocomplete); + }); + + // assert that the autocomplete listbox is open + expect(autocomplete).toHaveAttribute("aria-expanded", "true"); + + let options = wrapper.getAllByRole("option"); + + // select the target item + await act(async () => { + await userEvent.click(options[0]); + }); + + const {container} = wrapper; + + const clearButton = container.querySelector( + "[data-slot='inner-wrapper'] button:nth-of-type(1)", + )!; + + expect(clearButton).not.toBeNull(); + + // select the target item + await act(async () => { + await userEvent.click(clearButton); + }); + + // assert that the autocomplete listbox is open + expect(autocomplete).toHaveAttribute("aria-expanded", "true"); + }); + it("should open and close listbox by clicking selector button", async () => { const wrapper = render( From a8e2ed33d5ab060560267194a94893300bb35b7e Mon Sep 17 00:00:00 2001 From: Abhinav Agarwal Date: Wed, 25 Sep 2024 10:31:38 +0530 Subject: [PATCH 4/6] chore: update changeset --- .changeset/dirty-moles-refuse.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/dirty-moles-refuse.md b/.changeset/dirty-moles-refuse.md index ec0b7708fc..45ada242ab 100644 --- a/.changeset/dirty-moles-refuse.md +++ b/.changeset/dirty-moles-refuse.md @@ -1,5 +1,5 @@ --- -"@nextui-org/autocomplete": minor +"@nextui-org/autocomplete": patch --- -added state.open() and removed state.close() from onPress prop of clear button so that dropdown does not close when clear button is clicked +Improves handling of clear button in autocomplete component. Clicking the clear button will now clear the selected value without closing the dropdown. \ No newline at end of file From 046a9df995162cb2d9f68d1c5cdd23e8a163d03a Mon Sep 17 00:00:00 2001 From: Abhinav Agarwal Date: Wed, 25 Sep 2024 16:12:04 +0530 Subject: [PATCH 5/6] chore(autocomplete): change the docs for test cases --- .../autocomplete/__tests__/autocomplete.test.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/autocomplete/__tests__/autocomplete.test.tsx b/packages/components/autocomplete/__tests__/autocomplete.test.tsx index d892c82701..fb6162007c 100644 --- a/packages/components/autocomplete/__tests__/autocomplete.test.tsx +++ b/packages/components/autocomplete/__tests__/autocomplete.test.tsx @@ -223,7 +223,7 @@ describe("Autocomplete", () => { expect(clearButton).not.toBeNull(); - // select the target item + // click the clear button await act(async () => { await userEvent.click(clearButton); }); @@ -275,7 +275,7 @@ describe("Autocomplete", () => { expect(clearButton).not.toBeNull(); - // select the target item + // click the clear button await act(async () => { await userEvent.click(clearButton); }); @@ -316,7 +316,7 @@ describe("Autocomplete", () => { expect(clearButton).not.toBeNull(); - // select the target item + /// click the clear button await act(async () => { await userEvent.click(clearButton); }); @@ -360,7 +360,7 @@ describe("Autocomplete", () => { expect(clearButton).not.toBeNull(); - // select the target item + // click the clear button await act(async () => { await userEvent.click(clearButton); }); From 61278406df7b5888e786d3319bea4f1b58555389 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Sat, 28 Sep 2024 11:48:55 +0800 Subject: [PATCH 6/6] chore(changeset): update changeset message and add issue number --- .changeset/dirty-moles-refuse.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/dirty-moles-refuse.md b/.changeset/dirty-moles-refuse.md index 45ada242ab..5a73d0c78f 100644 --- a/.changeset/dirty-moles-refuse.md +++ b/.changeset/dirty-moles-refuse.md @@ -2,4 +2,4 @@ "@nextui-org/autocomplete": patch --- -Improves handling of clear button in autocomplete component. Clicking the clear button will now clear the selected value without closing the dropdown. \ No newline at end of file +Clicking the clear button clears the selected value without closing the dropdown. (#3788) \ No newline at end of file