-
Notifications
You must be signed in to change notification settings - Fork 49k
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 :)