fix: Fix conflict between posthog toolbar and Tanstack dev tools (#26849

)

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