From 8c20ea439bfa0c32d02793e406ee9a9510dfc409 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Wed, 19 Jun 2024 16:54:12 +0800 Subject: [PATCH 1/4] feat(select): add test --- .../select/__tests__/select.test.tsx | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/packages/components/select/__tests__/select.test.tsx b/packages/components/select/__tests__/select.test.tsx index 280ae91f74..a3b31d2c4a 100644 --- a/packages/components/select/__tests__/select.test.tsx +++ b/packages/components/select/__tests__/select.test.tsx @@ -616,6 +616,42 @@ describe("Select", () => { expect(logSpy).toHaveBeenCalledWith(JSON.stringify({select: ""})); }); + + it("should close listbox by clicking selector button again", async () => { + const wrapper = render( + , + ); + + const select = wrapper.getByTestId("select"); + + expect(select).not.toBeNull(); + + // open the select listbox by clicking selector button + await act(async () => { + await userEvent.click(select); + }); + + // assert that the select listbox is open + expect(select).toHaveAttribute("aria-expanded", "true"); + + // open the select listbox by clicking selector button + await act(async () => { + await userEvent.click(select); + }); + + // assert that the select listbox is closed + expect(select).toHaveAttribute("aria-expanded", "false"); + }); }); describe("Select with React Hook Form", () => { From 559dbdfd74ea8cf6baf7b21f18a36b1518c2b740 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Sun, 30 Jun 2024 18:04:49 +0800 Subject: [PATCH 2/4] fix(select): use domRef in ariaShouldCloseOnInteractOutside --- packages/components/select/src/use-select.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/select/src/use-select.ts b/packages/components/select/src/use-select.ts index fb3b730b6e..08ea8ae885 100644 --- a/packages/components/select/src/use-select.ts +++ b/packages/components/select/src/use-select.ts @@ -524,7 +524,7 @@ export function useSelect(originalProps: UseSelectProps) { : slotsProps.popoverProps?.offset, shouldCloseOnInteractOutside: popoverProps?.shouldCloseOnInteractOutside ? popoverProps.shouldCloseOnInteractOutside - : (element: Element) => ariaShouldCloseOnInteractOutside(element, triggerRef, state), + : (element: Element) => ariaShouldCloseOnInteractOutside(element, domRef, state), } as PopoverProps; }, [ @@ -544,7 +544,7 @@ export function useSelect(originalProps: UseSelectProps) { "data-open": dataAttr(state.isOpen), className: slots.selectorIcon({class: classNames?.selectorIcon}), }), - [slots, classNames?.selectorIcon, state?.isOpen], + [slots, classNames?.selectorIcon, state.isOpen], ); const getInnerWrapperProps: PropGetter = useCallback( From 77957ea71f923e10f053fab0c6af117add6af31b Mon Sep 17 00:00:00 2001 From: WK Wong Date: Sun, 30 Jun 2024 18:11:36 +0800 Subject: [PATCH 3/4] feat(changeset): add changeset --- .changeset/curvy-students-judge.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/curvy-students-judge.md diff --git a/.changeset/curvy-students-judge.md b/.changeset/curvy-students-judge.md new file mode 100644 index 0000000000..124ab0f9b0 --- /dev/null +++ b/.changeset/curvy-students-judge.md @@ -0,0 +1,5 @@ +--- +"@nextui-org/select": patch +--- + +fixed select closing issue with selector button (#3276) From 727a229f7aab56cf17e7be830400a1194c8e5684 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Sun, 30 Jun 2024 19:30:02 +0800 Subject: [PATCH 4/4] fix(select): rewrite "should unset form value" test --- .../select/__tests__/select.test.tsx | 37 +++++++++---------- 1 file changed, 17 insertions(+), 20 deletions(-) diff --git a/packages/components/select/__tests__/select.test.tsx b/packages/components/select/__tests__/select.test.tsx index a3b31d2c4a..2c64374628 100644 --- a/packages/components/select/__tests__/select.test.tsx +++ b/packages/components/select/__tests__/select.test.tsx @@ -564,7 +564,12 @@ describe("Select", () => { console.log(JSON.stringify(Object.fromEntries(formData))); }} > - foo bar @@ -574,40 +579,32 @@ describe("Select", () => { , ); - const select = wrapper.getByTestId("select"); - - expect(select).not.toBeNull(); + const submitButton = wrapper.getByTestId("submit-button"); await act(async () => { - await user.click(select); + await user.click(submitButton); }); - let listbox = wrapper.getByRole("listbox"); - - expect(listbox).toBeTruthy(); + expect(logSpy).toHaveBeenCalledWith(JSON.stringify({select: "foo"})); - let listboxItems = wrapper.getAllByRole("option"); + const select = wrapper.getByTestId("select"); - expect(listboxItems.length).toBe(2); + expect(select).not.toBeNull(); await act(async () => { - await user.click(listboxItems[1]); + await user.click(select); }); - let submitButton = wrapper.getByTestId("submit-button"); + const listbox = wrapper.getByRole("listbox"); - await act(async () => { - await user.click(submitButton); - }); + expect(listbox).toBeTruthy(); - expect(logSpy).toHaveBeenCalledWith(JSON.stringify({select: "bar"})); + const listboxItems = wrapper.getAllByRole("option"); - await act(async () => { - await user.click(select); - }); + expect(listboxItems.length).toBe(2); await act(async () => { - await user.click(listboxItems[1]); + await user.click(listboxItems[0]); }); await act(async () => {