[BUG] Tooltip closes when button click changes conditional state variable

[thomas-hogan]

Bug description
When the tooltip contains a button that updates a state variable, and that same variable is used to show the button, the tooltip crashes/closes. Works properly if the button remains in the tooltip or the hide functionality is done with CSS instead.

Version of Package
v5.21.7

To Reproduce
https://codesandbox.io/s/strange-einstein-66wc93?file=/src/TestComponent.jsx

Expected behavior
Ideally there is some functionality where the tooltip contains option buttons and when one is clicked it hides those buttons and displays some other content.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information if possible or delete this section):

• OS: macOS
• Browser Chrome
• Version 118.0.5993.117
• Frameworks React 18, Next.js 13

[gabrieljablonski]

Definitely an interesting case, but I'm hesitant to call this a bug, rather than just a weird interaction.

The following is mostly for future reference so I don't forget my reasoning about this particular situation, so don't worry too much about this explanation.

When using openOnClick, the tooltip will close by default when clicking anywhere outside the anchor element and the tooltip itself (see here).

In this exact situation, when you click the button inside the tooltip, it is part of the tooltip. The issue is that by the time the check runs, the button already got unmounted from the DOM, so tooltipRef.current.contains() fails to see it.

If we consider this interaction to be a bug (I'm leaning towards yes), the easy fix is to also check for target.isConnected (already tested and this works). Though this might not be ideal since it might break in some other scenarios (can't think of any right now, but better safe than sorry).

---

As for what you should do about it, here's something that seems to work https://codesandbox.io/s/kind-hill-3tw2jh?file=/src/TestComponent.jsx

<button
  onClick={() => {
    setTimeout(() => setShow(true));
  }}
>
  action
</button>

Using a bare setTimeout() (yep, without any delay) defers the DOM update just enough for the check for outside clicks to run properly.

We'll leave this open for now and come back to it in the future. If by then I can't think of any situations that doing the isConnected check breaks something, we'll just do that.

---

On a final note, we've literally just released v5.22.0 an hour ago, so if you've just started using react-tooltip on your project (maybe even if you've been using it for a while) I suggest you upgrade to it. We've introduced a couple new features you might end up using eventually, so might as well upgrade now (and also let us know if you run into any other bugs 😅😅).

[thomas-hogan]

Thanks! The workaround seems to work.

One other question: in an instance where a button click inside the tooltip opens up a modal on the page with some actions inside, is there a way to prevent the click handler check from happening while doing things inside the modal? As soon as I click inside the modal the tooltip closes.

[gabrieljablonski]

Glad to know. As I've said, we'll revisit this in the future.

is there a way to prevent the click handler check from happening while doing things inside the modal?

Yep, but as I've said, you'll have to upgrade to v5.22.0. You can check the docs for the closeEvents and globalCloseEvents props.

If I understood you correctly, do you wish to ignore the "click outside" only when the modal is open, and have it work normally when the modal is closed? If that's the case, something like this should work

<Tooltip globalCloseEvents={{ clickOutsideAnchor: !modalIsOpen }} />

If that doesn't work, or you run into other issues with this (it's a brand new feature), please open a new issue with more info.

Thanks!

[thomas-hogan]

Wow perfect timing! That worked

[github-actions]

This issue is stale because it has not seen activity in 30 days. Remove the stale label or comment within 14 days, or it will be closed.

[gabrieljablonski]

Fixed on official release react-tooltip@5.26.1