-
Notifications
You must be signed in to change notification settings - Fork 49.8k
Description
Hi, I'm having an issue with onMouseEnter being triggered on children of a component. It only occurs with React 16.
I've created a CodePen that shows the issue.
Simplified structure is as below:
<Card/> :
–––––––––––––––––––––––––––––
| |
| <Cover/> |
| |
------------------------------
| |
| <div class="text" /> |
| |
–––––––––––––––––––––––––––––
<Card /> is a component that needs to capture onMouseMove events (and trigger a render) and <Cover/> is a simple component that waits for an image (passed as a prop) to be loaded before displaying it (using onload on an Image created in the constructor).
If you open the console, you'll see that onMouseEnter is triggered when hovering <Card /> (normal behavior), but also when hovering the .text div (which is not supposed to happen).
If you remove the whole onload logic from the <Cover/> element, then onMouseEnter works as intended.
It's possible that I'm coding this in a way that isn't appropriate, but it does look like a bug anyway :)