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.

Start with the linked CodeSandbox and compare React synthetic mouse events with the native browser events described there. Trace the synthetic event handling for removing the upper element, then verify that the underlying div receives mouseenter after removal and add coverage for that behavior.