react-tooltip icon indicating copy to clipboard operation
react-tooltip copied to clipboard

[BUG] combination of openOnClick & globalCloseEvents with clickOutsideAnchor does not close on click outside anchor

Open MrazJakub opened this issue 1 year ago • 2 comments

Bug description I have a Tooltip component that looks like this:

image

Tooltip component that has both the openOnClick (or openEvents={{ click: true }} ) and globalCloseEvents={{ clickOutsideAnchor: true }} props, does not combine their behavior.

Version of Package v5.28.0

To Reproduce Create a Tooltip with both openOnClick & globalCloseEvents.

Expected behavior I expect the the tooltip to be shown on click on the #anchorSelect anchor and to be closed on another click. I also expect to close the tooltip on click outside the Tooltip. Instead the clickOutsideAnchor doesn't work and clicking outside the #anchorSelect does not work

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

Additional context "react": "^18.2.0", "styled-components": "^5.3.6", "typescript": "^5.5.4"

MrazJakub avatar Oct 09 '24 08:10 MrazJakub

How are you using isOpen? You might be having issues with controlled/uncontrolled state for the tooltip. Please try providing a code sandbox reproducing the issue.

Also check #1220 and see if it relates to your issue.

gabrieljablonski avatar Oct 09 '24 11:10 gabrieljablonski

Hi @JMLexLExter you can use setIsOpen function that will trigger during clickOutsideAnchor so update your state inside setIsOpen callback function.

richhapal avatar Oct 09 '24 16:10 richhapal

@richhapal @gabrieljablonski Thank you both for a quick response, sorry for the late reply, this issue priority changed. I tried to create a sandbox where the issue was replicated, but Instead I find out that the reason was me incorrectly assuming how setIsOpen works. After setting it up correctly and checking that svg need pointer-events: none.

It worked for me, so thanks.

MrazJakub avatar Oct 31 '24 08:10 MrazJakub