onMouseLeave doesn't work if the node gets detached #6807
Description
I have a problem with this kind of component:
class onHover extends Component {
constructor(props) {
super(props);
this.state = {
bool: false,
}
}
render() {
return (
<div onMouseEnter={() => this.setState({ bool: true })} onMouseLeave={() => this.setState({ bool: false })}>
{
this.state.bool ? (
<span>[OPTION1] show after onMouseEnter</span>
) : (
<div>[OPTION2] show after onMouseLeave</div>
)
}
</div>
)
}
}Notice that the first option1 is a span, option2 is a div.
This works fine when I move the mouse slowly.
Though, if I "cut" through this with the mouse very fast, only the onMouseEnter event gets triggered, but not the onMouseLeave event.
It is always working though, if both options have the same tag (if both are div or both are span).
EDIT:
I think it has something to do with rerendering. When the components are of the same type, but I force a rerender, it causes the same issues.
class onHover extends Component {
constructor(props) {
super(props);
this.state = {
bool: false,
}
}
render() {
return (
<div onMouseEnter={() => this.setState({ bool: true })} onMouseLeave={() => this.setState({ bool: false })}>
{
this.state.bool ? (
<div key={Math.random()}>[OPTION1] show after onMouseEnter</div>
) : (
<div key={Math.random()}>[OPTION2] show after onMouseLeave</div>
)
}
</div>
)
}
}