How to generate onMouseLeave event to React?

All good health!
There is a "Message" element, on which hung some logic in the event onMouseEnter and onMouseLeave cleaned on. While inside there is another element - the "Dropdown". When you close this dropdown'a want to trigger the onMouseLeave event if the cursor is not over the element "Message" after closing and dropdown'. As Slack.

Demo https://codepen.io/Remington_Cummings/pen/NWPrvze?editors=0010
April 3rd 20 at 17:47
1 answer
April 3rd 20 at 17:49
Solution
As an option:

1. Add div-have an event onMouseMove, it remember the coordinates of the mouse
onMouseMove={e => { this.mouse = { clientX: e.clientX, clientY: e.clientY }} }


2. The procedure close Check the coordinates and disable call in case of exit for them

const rect = document.querySelector('.Message').getBoundingClientRect()
if (this.mouse.clientX < rect.left || 
 this.mouse.clientX > rect.right || 
 this.mouse.clientY < rect.top ||
 this.mouse.clientY > rect.bottom) {
this.disable()
}


Line
document.querySelector('.Message')

just for example, look at the good via ref

https://codepen.io/Brock.Smitham/pen/zYxBQvo?editors=0010
There is a suspicion that in this.mouse is not very good because React uses a wrapper SynteticEvent, which die immediately after surfacing. If you need event later - need to call event.persist().
P. S. Maybe I lied - athena commented on April 3rd 20 at 17:52
@athena, Probably lied, because it works. But instead of this.mouse = e to use
this.mouse = { clientX: e.clientX, clientY: e.clientY }
- Brock.Smitham commented on April 3rd 20 at 17:55
@Brock.Smitham, apparently, not lying
codesandbox - athena commented on April 3rd 20 at 17:58
@athenaAt the end of my answer there is a link to the working code on codepen - Brock.Smitham commented on April 3rd 20 at 18:01
@Brock.Smitham, I looked at this working code and I have nothing to say except to curse - athena commented on April 3rd 20 at 18:04
@athena, Why? - Brock.Smitham commented on April 3rd 20 at 18:07
Thank you. Only you can do without MouseMove, checking the coordinates in the close:
close = (e) => {
 const { clientX: x, clientY: y } = e;
 const rect = this.messageNodeRef.getBoundingClientRect();
 if ([x < rect.left, x > rect.right, y < rect.top, y > rect.bottom ].some(x => x)) {
 this.disable(); 
}
 this.setState({ open: false });
 }
- Remington_Cummings commented on April 3rd 20 at 18:10

Find more questions by tags JavaScriptWeb DevelopmentReact