diff --git a/packages/orbit-components/src/Popover/__tests__/index.test.tsx b/packages/orbit-components/src/Popover/__tests__/index.test.tsx index 58b0dfdad9..4136ce0b10 100644 --- a/packages/orbit-components/src/Popover/__tests__/index.test.tsx +++ b/packages/orbit-components/src/Popover/__tests__/index.test.tsx @@ -107,4 +107,39 @@ describe("Popover", () => { if (overlay) await user.click(overlay); expect(screen.queryByTestId("dialog")).not.toBeInTheDocument(); }); + + it("should allow interacting with nested elements", async () => { + const nestedOnClick = jest.fn(); + const contentOnClick = jest.fn(); + + render( + + + Nested button + + } + > + Hover me + + + + } + > + + , + ); + + await user.click(screen.getByTestId("popover-trigger")); + await user.click(screen.getByTestId("tooltip-trigger")); + await user.click(screen.getByTestId("nested-button")); + expect(nestedOnClick).toHaveBeenCalled(); + await user.click(screen.getByTestId("content-button")); + expect(contentOnClick).toHaveBeenCalled(); + }); }); diff --git a/packages/orbit-components/src/Popover/components/ContentWrapper.tsx b/packages/orbit-components/src/Popover/components/ContentWrapper.tsx index dcc9de5c7e..febe470cc7 100644 --- a/packages/orbit-components/src/Popover/components/ContentWrapper.tsx +++ b/packages/orbit-components/src/Popover/components/ContentWrapper.tsx @@ -116,9 +116,13 @@ const PopoverContentWrapper = ({ }; }, [update, actions, setActionsHeight, onClose]); - useClickOutside(content, ev => { - if (isLargeMobile) onClose(ev); - }); + useClickOutside( + content, + ev => { + if (isLargeMobile) onClose(ev); + }, + "click", + ); const cssVars = { "--popper-top": popper.top, diff --git a/packages/orbit-components/src/hooks/useClickOutside/index.ts b/packages/orbit-components/src/hooks/useClickOutside/index.ts index 18908c420e..f7e686547b 100644 --- a/packages/orbit-components/src/hooks/useClickOutside/index.ts +++ b/packages/orbit-components/src/hooks/useClickOutside/index.ts @@ -5,7 +5,7 @@ import useEventListener from "../useEventListener"; const useClickOutside = ( ref: React.RefObject, handler: (ev: MouseEvent) => void, - mouseEvent: "mousedown" | "mouseup" = "mousedown", + mouseEvent: "mousedown" | "mouseup" | "click" = "mousedown", ): void => { useEventListener(mouseEvent, event => { const el = ref?.current;