https://github.com/toastdriven/react-hover-test

This is to demonstrate a weird bug in React around `onMouseLeave`.
https://github.com/toastdriven/react-hover-test

Last synced: 3 months ago
JSON representation

This is to demonstrate a weird bug in React around `onMouseLeave`.

• Host: GitHub
• URL: https://github.com/toastdriven/react-hover-test
• Owner: toastdriven
• License: mit
• Created: 2023-11-14T15:29:15.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-11-16T15:21:12.000Z (over 2 years ago)
• Last Synced: 2025-10-09T06:45:20.527Z (7 months ago)
• Language: HTML
• Size: 246 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React `onMouseLeave` Bug Reproduction

This is to demonstrate a weird bug in React. The `onMouseLeave` events don't seem to behave correctly (or at least not as expected).

# Expected Behavior

This app shows two lists (all options & active options).

When you mouse over an option in the _"All Options"_ list, it should highlight **same** option in the _"Active Options"_ list.

When you mouse out of the option, it should remove the highlight from **all** active options.

These events are hooked up as "low" in the DOM as possible, on the `
` tags in the list.


> Note: A Preact example with almost the same code behaves as expected & is included at `./preact-hover-test.html`. Here's what it looks like:

> ![preact_version.gif](https://github.com/toastdriven/react-hover-test/blob/main/preact_version.gif?raw=true)

# Actual Behavior

`onMouseEnter` seems to behave correctly, and correctly adds the option to the active options. The highlight then takes effect.

However, when the mouse **leaves** the `
`, the `onMouseLeave` doesn't seem to trigger, leaving the highlight in place.


It's only upon the mouse leaving the _parent_ tag that the `onMouseLeave` seems to trigger. In this case, it's the `
` tag, but I experienced the same bug when I just used `
` tags for everything.


Here's a gif of it in action:

![react_version.gif](https://github.com/toastdriven/react-hover-test/blob/main/react_version.gif?raw=true)