onMouseEnter does not fire on an underlaying element if an element above is removed

Do you want to request a feature or report a bug?

Bug - I did do some searching around the issues to see if there was a similar/dupe, but I could not find one.

What is the current behavior?

With 2 elements overlaying on top of each other, if the upper element gets removed while the cursor is over both elements, mouse enter never fires on the element below. I compared this to native browser events and the issue does not appear to persist there (native browser events appear to fire mouse enter for the underlying div when the overlaying div gets removed).

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

CodeSandbox Example

I provided a top level boolean constant to switch between using react’s synthetic events and the native browser events. In the console I keep track of state updates as console logs. The simple way to test - open the console, mouse over the upper div in a position that is also on top of the lower div, click to remove the upper div, the lower div SHOULD fire mouse enter. It does not with synthetic events, but it does with browser events.

What is the expected behavior?

Expected behavior for me would be if react would fire mouse enter on the underlaying div when the upper div is removed.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

"dependencies": {
    "react": "16.5.2",
    "react-dom": "16.5.2",
  },

I have not had a chance to test previous versions.

[elertan]

I’m facing a similar problem. I have a list with elements that represent entities, on hover I want to show actions for these entities, such as a delete action. When I delete an entity, the list moves up to fill the ‘gap’ that it would have created, placing the cursor on top of the next element, however this does not trigger the onMouseEnter event on that element, thus not showing the actions.

As far as I’m aware React does not provide other API’s that would allow me to capture an event that the cursor has entered this element when the DOM’s element change position instead of the user moving the mouse. I have also tried onMouseOver, but that also only triggers after the user having to move the mouse.

[tianzhich]

same problem here