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;