-
-
Notifications
You must be signed in to change notification settings - Fork 533
[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
Comments
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 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 If we consider this interaction to be a bug (I'm leaning towards yes), the easy fix is to also check for 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 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 On a final note, we've literally just released v5.22.0 an hour ago, so if you've just started using |
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. |
Glad to know. As I've said, we'll revisit this in the future.
Yep, but as I've said, you'll have to upgrade to v5.22.0. You can check the docs for the 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! |
Wow perfect timing! That worked |
This issue is stale because it has not seen activity in 30 days. Remove the |
Fixed on official release |
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):
The text was updated successfully, but these errors were encountered: