Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
thomas-hogan opened this issue Nov 1, 2023 · 6 comments · Fixed by #1170
Closed

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

thomas-hogan opened this issue Nov 1, 2023 · 6 comments · Fixed by #1170
Labels

Comments

@thomas-hogan
Copy link

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
Copy link
Member

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
Copy link
Author

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
Copy link
Member

gabrieljablonski commented Nov 2, 2023

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
Copy link
Author

Wow perfect timing! That worked

Copy link

github-actions bot commented Feb 1, 2024

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.

@github-actions github-actions bot added the Stale This has not seen activity in quite some time label Feb 1, 2024
@gabrieljablonski gabrieljablonski removed the Stale This has not seen activity in quite some time label Feb 1, 2024
@gabrieljablonski
Copy link
Member

Fixed on official release react-tooltip@5.26.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants