fix(select): close select by pressing selector button (#3374)

* feat(select): add test * fix(select): use domRef in ariaShouldCloseOnInteractOutside * feat(changeset): add changeset * fix(select): rewrite "should unset form value" test
nextui-org · Jul 6, 2024 · 7cc1bd7 · 7cc1bd7
1 parent c5ab49a
commit 7cc1bd7
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 15 deletions.
diff --git a/.changeset/curvy-students-judge.md b/.changeset/curvy-students-judge.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/select": patch
+---
+
+fixed select closing issue with selector button (#3276)
diff --git 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)));
         }}
       >
-        <Select data-testid="select" label="test select" name="select" size="sm">
+        <Select
+          data-testid="select"
+          defaultSelectedKeys={["foo"]}
+          label="test select"
+          name="select"
+        >
           <SelectItem key="foo">foo</SelectItem>
           <SelectItem key="bar">bar</SelectItem>
         </Select>
@@ -574,6 +579,14 @@ describe("Select", () => {
       </form>,
     );
 
+    const submitButton = wrapper.getByTestId("submit-button");
+
+    await act(async () => {
+      await user.click(submitButton);
+    });
+
+    expect(logSpy).toHaveBeenCalledWith(JSON.stringify({select: "foo"}));
+
     const select = wrapper.getByTestId("select");
 
     expect(select).not.toBeNull();
@@ -582,39 +595,59 @@ describe("Select", () => {
       await user.click(select);
     });
 
-    let listbox = wrapper.getByRole("listbox");
+    const listbox = wrapper.getByRole("listbox");
 
     expect(listbox).toBeTruthy();
 
-    let listboxItems = wrapper.getAllByRole("option");
+    const listboxItems = wrapper.getAllByRole("option");
 
     expect(listboxItems.length).toBe(2);
 
     await act(async () => {
-      await user.click(listboxItems[1]);
+      await user.click(listboxItems[0]);
     });
 
-    let submitButton = wrapper.getByTestId("submit-button");
-
     await act(async () => {
       await user.click(submitButton);
     });
 
-    expect(logSpy).toHaveBeenCalledWith(JSON.stringify({select: "bar"}));
+    expect(logSpy).toHaveBeenCalledWith(JSON.stringify({select: ""}));
+  });
 
-    await act(async () => {
-      await user.click(select);
-    });
+  it("should close listbox by clicking selector button again", async () => {
+    const wrapper = render(
+      <Select aria-label="Favorite Animal" data-testid="select" label="Favorite Animal">
+        <SelectItem key="penguin" value="penguin">
+          Penguin
+        </SelectItem>
+        <SelectItem key="zebra" value="zebra">
+          Zebra
+        </SelectItem>
+        <SelectItem key="shark" value="shark">
+          Shark
+        </SelectItem>
+      </Select>,
+    );
+
+    const select = wrapper.getByTestId("select");
+
+    expect(select).not.toBeNull();
 
+    // open the select listbox by clicking selector button
     await act(async () => {
-      await user.click(listboxItems[1]);
+      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 user.click(submitButton);
+      await userEvent.click(select);
     });
 
-    expect(logSpy).toHaveBeenCalledWith(JSON.stringify({select: ""}));
+    // assert that the select listbox is closed
+    expect(select).toHaveAttribute("aria-expanded", "false");
   });
 });
 

diff --git a/packages/components/select/src/use-select.ts b/packages/components/select/src/use-select.ts
@@ -524,7 +524,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
             : 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<T extends object>(originalProps: UseSelectProps<T>) {
       "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(