From 11146b6fc59ceeefe209b47fc5f6950257f20155 Mon Sep 17 00:00:00 2001
From: Rafael Audibert <32079912+rafaeelaudibert@users.noreply.github.com>
Date: Wed, 11 Dec 2024 19:00:41 -0300
Subject: [PATCH] fix: Fix conflict between posthog toolbar and Tanstack dev
 tools (#26849)

---
 frontend/src/toolbar/ToolbarApp.tsx | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/src/toolbar/ToolbarApp.tsx b/frontend/src/toolbar/ToolbarApp.tsx
index f623736bd9c2b..80e43b38868a2 100644
--- a/frontend/src/toolbar/ToolbarApp.tsx
+++ b/frontend/src/toolbar/ToolbarApp.tsx
@@ -40,9 +40,19 @@ export function ToolbarApp(props: ToolbarProps = {}): JSX.Element {
               }
     )
 
+    // There's a small conflict between our toolbar and the Tanstack React Dev library
+    // because Tanstack is polluting the global event listeners with a mouse down listener
+    // which conflicts with our toolbar's internal mouse down listeners
+    //
+    // To workaround that we simply prevent the event from bubbling further than the toolbar
+    // See https://github.com/PostHog/posthog-js/issues/1425
+    const onMouseDown = ({ nativeEvent: event }: React.MouseEvent<HTMLDivElement>): void => {
+        event.stopImmediatePropagation()
+    }
+
     return (
         <>
-            <root.div id={TOOLBAR_ID} className="ph-no-capture" ref={shadowRef}>
+            <root.div id={TOOLBAR_ID} className="ph-no-capture" ref={shadowRef} onMouseDown={onMouseDown}>
                 <div id="posthog-toolbar-styles" />
                 {didRender && (didLoadStyles || props.disableExternalStyles) ? <ToolbarContainer /> : null}
                 <ToastContainer