fix(Popover): links inside tooltips inside content are now clickable

kiwicom · Dec 1, 2023 · b7114a6 · b7114a6
1 parent 0fd1642
commit b7114a6
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 4 deletions.
diff --git 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(
+      <Popover
+        content={
+          <>
+            <Tooltip
+              content={
+                <Button dataTest="nested-button" onClick={nestedOnClick}>
+                  Nested button
+                </Button>
+              }
+            >
+              <span data-test="tooltip-trigger">Hover me</span>
+            </Tooltip>
+            <Button dataTest="content-button" onClick={contentOnClick}>
+              Content button
+            </Button>
+          </>
+        }
+      >
+        <Button dataTest="popover-trigger">Open popover</Button>
+      </Popover>,
+    );
+
+    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
@@ -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
@@ -5,7 +5,7 @@ import useEventListener from "../useEventListener";
 const useClickOutside = <T extends HTMLElement>(
   ref: React.RefObject<T>,
   handler: (ev: MouseEvent) => void,
-  mouseEvent: "mousedown" | "mouseup" = "mousedown",
+  mouseEvent: "mousedown" | "mouseup" | "click" = "mousedown",
 ): void => {
   useEventListener(mouseEvent, event => {
     const el = ref?.current;