Conflict with react-query devtools

[tyteen4a03]

When I have both PostHog Toolbar and React Query DevTools in my application, toggling Feature Flags stop working.

[pauldambra]

hey @tyteen4a03

Can you share more info about what happens? Do you see any errors in the network panel or the console?

Is that this dev tools? https://tanstack.com/query/latest/docs/framework/react/devtools

[tyteen4a03]

hey @tyteen4a03

Can you share more info about what happens? Do you see any errors in the network panel or the console?

Is that this dev tools? https://tanstack.com/query/latest/docs/framework/react/devtools

No warnings or errors, clicking on the toggle just instantly closes the toolbar without actually toggling the FF.

Yes, that's the package.

[pauldambra]

Wild... do other interactions in the toolbar work?

[tyteen4a03]

Wild... do other interactions in the toolbar work?

I just checked again, none of the click interactions work.

[rmanganiello]

Hey folks!

I was having the same issue and I realized that this is because Tanstack Query Devtools is adding a mousedown event listener that generates this wrong behavior:

In order to prevent this, I created a React component that adds a new event listener for the mousedown event type, stopping propagation to other event listeners.

import { useEffect } from 'react';

export const PosthogToolbarGuardAgainstTanstackDevtools = () => {
  useEffect(() => {
    let observer: MutationObserver | null = null;

    // Function to check and attach the event listener if the element is present
    const checkAndAttachListener = () => {
      const posthogToolbar = document.getElementById('__POSTHOG_TOOLBAR__');

      if (posthogToolbar) {
        const stopEvent = (e: MouseEvent) => {
          e.stopImmediatePropagation();
        };
        posthogToolbar.addEventListener('mousedown', stopEvent);

        // Cleanup function to remove the event listener and disconnect the observer
        return () => {
          posthogToolbar.removeEventListener('mousedown', stopEvent);
          if (observer) observer.disconnect();
        };
      }
    };

    // Observer callback triggers when any changes in child elements of the body occur
    observer = new MutationObserver(checkAndAttachListener);
    observer.observe(document.body, { childList: true, subtree: true });

    // Return cleanup function to disconnect observer on unmount
    return () => {
      if (observer) observer.disconnect();
    };
  }, []);

  return null;
};

You can use this component inside the PostHogProvider component like this:

<PostHogProvider apiKey={import.meta.env.VITE_POSTHOG_API_KEY} options={posthogOptions}>
  <PosthogToolbarGuardAgainstTanstackDevtools />
  {children}
</PostHogProvider>

Let me know if this works for you!

[tyteen4a03]

@rmanganiello thank you! Do you think this is an issue on TanStack's end?

[rmanganiello]

Not sure yet, I need to keep checking the Tanstack Devtools Library to understand where the issue is generated.