Repository: chakra-ui/chakra-ui

Issue #3659: [1.4.1] Tooltips with new Identity and openDelay dont hide after first hover
Created: 2021-03-24T13:04:03Z
🐛 Bug report
Tooltips with openDelay that get a new identity will open and not close after the first time the mouse hovers over the trigger, if the mouse leaves before the tooltip opens
💥 Steps to reproduce

Have a tooltip with openDelay > 0
Have it re-mount with a new identity
Hover over the tooltip-trigger
Leave the trigger before the tooltip opens
See that after the configured delay, the tooltip opens and stays open

💻 Link to reproduction
CodeSandbox reproduction: https://codesandbox.io/s/hardcore-water-jvxlj?file=/src/App.js:387-390
🧐 Expected behavior
The tooltip should neither open, nor stay open if i leave the trigger before it opens
🧭 Possible Solution
Some debugging showed, that the mouseleave-event isn't triggered in this case. Maybe the ref/domnode provided here has the wrong value?

  
    
      chakra-ui/packages/tooltip/src/use-tooltip.ts
    
    
         Line 155
      in
      1d85e47
    
  
  
    

        
          
           useEventListener("mouseleave", closeWithDelay, ref.current) 
        
    
  


🌍 System information




Software
Version(s)




Chakra UI
1.4.1


Browser
Chrome  89 & Firefox 86


Operating System
macOS 11.2.3



📝 Additional information
This did not happen on chakra 1.3.x
Here is a video of the error happening in the provided code-sandbox:

  
    
    

    Screen.Recording.2021-03-24.at.13.53.30.mp4
    
  

  

  


Update
Using the automatically created Build from #4442 Fixes the Issue in the initial Codesandbox:
https://codesandbox.io/s/affectionate-mccarthy-bpmjf?file=/src/index.js

Duplicate issue #3951: Tooltip openDelay not autoclosing upon first render
Created: 2021-05-03T21:55:32Z
🐛 Bug report
The Tooltip openDelay prop is breaking the tooltip. Upon the first render (this is extremelly important, since this bug only happens on the first hover upon the first render of the component), if you hover the target component quickly (hover and immediatly, without waiting for the Tooltip to appear, leaves that component) the Tooltip opens and remains open forever.
Some things that I've noted:
1 - IMPORTANT: Don't discart this bug quickly. It is really intermitent (since it only happens upon the first hover after the component render). If you were not able to replicate this issue, please let me know
2 - I've noticed that it started happened after I upgrade to v1.6.0 (I was on 1.3.3)
3 - It only happens right when your component was rendered. If you hover anything else besides that componen, for some reason, it won't happen
💥 Steps to reproduce
The steps below is the best way that I was able to achive a minimum viable reproducion of the bug:

Open the More Examples section in the Chakra's Tooltip page
Without hovering any button edit the code of the "Delay Open - 500ms" tooltip to openDelay={2000} (the longer, the easier to reproduce)
Now, hover that button in the preview section (right above) and immediatly removes your mouse from the button and don't hover anything else
After 2 seconds, the Tooltip will open and remain that way
Now, hover the button again, and remove your mouse from the button. The Tooltip will disapear
Now, hover and remove the mouse again (to try the bug). You will see that it doesn't happen anymore

It is extremelly annoying. In my app I have a dozen Tooltips in a given page, if the user pass all the targets without waiting it opens all the 12 tooltips.
💻 Link to reproduction
https://chakra-ui.com/docs/overlay/tooltip#more-examples
🧐 Expected behavior
Even upon first render, The Tooltips should appear and hide.
📝 Additional information
Please, fix this issue. It is almost mandatory for our app and I invested at least 3 hours exploring this bug to find a way to reproduce it :)
Thanks :D

Closing comment (2021-05-03T22:14:25Z): This is a duplicate of #3659.
We'll look into this as soon as we can.