From 4f39c4a91142b17772017f8aaff0d3ed4bcc6df9 Mon Sep 17 00:00:00 2001
From: Daniel Sil <daniel.sil@kiwi.com>
Date: Thu, 30 Nov 2023 14:42:10 +0100
Subject: [PATCH] fix(Popover): links inside tooltips inside content are now
 clickable

---
 .../src/Popover/__tests__/index.test.tsx      | 35 +++++++++++++++++++
 .../src/Popover/components/ContentWrapper.tsx | 10 ++++--
 .../src/hooks/useClickOutside/index.ts        |  2 +-
 3 files changed, 43 insertions(+), 4 deletions(-)

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(
+      <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
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 = <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;