Skip to content

onMouseEnter triggered on children in React 16 #11152

@dbismut

Description

@dbismut

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 :)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions