How to fire onMouseLeave event in React?

Question

JavaScript

All health!
There is a "Message" element, on which some logic is hung on the onMouseEnter event and removed on onMouseLeave. At the same time, there is another element inside - "Dropdown". When closing this dropdown, I want the onMouseLeave event to fire if the cursor is not over the "Message" element after the dropdown is closed. Like Slack.
Demo - https://codepen.io/monochromer/pen/NWPrvze?editors=0010

Answer 1

As an option:
1. Add an onMouseMove event to the div, remember the mouse coordinates in it
2. In the close procedure, check the coordinates and call disable if they are out of range

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()
}

The line is just for example, you need to search for good through ref https://codepen.io/dimoff66/pen/zYxBQvo?editors=0010