archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* feat(select): add test

* fix(select): use domRef in ariaShouldCloseOnInteractOutside

* feat(changeset): add changeset

* fix(select): rewrite "should unset form value" test
This commit is contained in:
աӄա 2024-07-06 15:24:17 +08:00 committed by GitHub
parent c5ab49afa4
commit 7cc1bd78a3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 60 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/curvy-students-judge.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/select": patch
---
fixed select closing issue with selector button (#3276)

73
packages/components/select/__tests__/select.test.tsx
View File

@ -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,32 +595,16 @@ 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]);
});
let submitButton = wrapper.getByTestId("submit-button");
await act(async () => {
await user.click(submitButton);
});
expect(logSpy).toHaveBeenCalledWith(JSON.stringify({select: "bar"}));
await act(async () => {
await user.click(select);
});
await act(async () => {
await user.click(listboxItems[1]);
await user.click(listboxItems[0]);
});
await act(async () => {
@ -616,6 +613,42 @@ describe("Select", () => {
expect(logSpy).toHaveBeenCalledWith(JSON.stringify({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 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", () => {

4
packages/components/select/src/use-select.ts
View File

@ -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(