Skip to content
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

[BUG] useHover is "stuck" on true value if the hovered element is removed from the DOM #643

Open
YossiSaadi opened this issue Oct 10, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@YossiSaadi
Copy link

Describe the bug

I have a scenario where, when I hover on an element (container), something else is rendered adjacent to it.
This hovered container contains a button as well as more stuff, and when clicking on the button, the view changes.
The issue is that if I click the button and the view changes, and therefore the hovered ref is removed.

To Reproduce

https://stackblitz.com/edit/vitejs-vite-sxroxj?file=src%2Ftest.tsx&terminal=dev

const hoverRef = useRef(null);
const isHovered = useHover<HTMLElement>(hoverRef);

{showInput ? (
  <input
    ref={hoverRef}
    type="text"
    placeholder="Hover over me"
    onClick={handleClick}
  />
) : (
  <button>
    Now I am a button!
  </button>
)}

once input is hovered and showInput becomes false, isHovered would stay stuck on true

Expected behavior

I guess the hook should be familiar with the fact its ref no longer exists in the DOM?

Additional context

No response

@YossiSaadi YossiSaadi added the bug Something isn't working label Oct 10, 2024
@sagarchoudhary96
Copy link

@juliencrn any updates on this ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants