diff --git a/packages/components/popover/__tests__/popover.test.tsx b/packages/components/popover/__tests__/popover.test.tsx index bc7236a243..53d463a699 100644 --- a/packages/components/popover/__tests__/popover.test.tsx +++ b/packages/components/popover/__tests__/popover.test.tsx @@ -4,6 +4,7 @@ import userEvent from "@testing-library/user-event"; import {Button} from "@nextui-org/button"; import {Popover, PopoverContent, PopoverTrigger} from "../src"; +import {Select, SelectItem} from "../../select/src"; // e.g. console.error Warning: Function components cannot be given refs. // Attempts to access this ref will fail. Did you mean to use React.forwardRef()? @@ -266,4 +267,51 @@ describe("Popover", () => { expect(trigger).toHaveFocus(); }); }); + + it("should not close popover if nested select is closed", async () => { + const wrapper = render( + + + + + + + + , + ); + + const popover = wrapper.getByTestId("popover"); + + await act(async () => { + // open popover + await userEvent.click(popover); + }); + + // assert that the popover is open + expect(popover).toHaveAttribute("aria-expanded", "true"); + + const select = wrapper.getByTestId("select"); + + await act(async () => { + // open select + await userEvent.click(select); + }); + + // assert that the select is open + expect(select).toHaveAttribute("aria-expanded", "true"); + + await act(async () => { + await userEvent.click(document.body); + }); + + // assert that the select is closed + expect(select).toHaveAttribute("aria-expanded", "false"); + + // assert that the popover is still open + expect(popover).toHaveAttribute("aria-expanded", "true"); + }); });