MouseEvent doesn't recognize react's Synthetic onMouseLeave

[DannyvanHolten]

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

What is the current behavior?
The Javascript MouseEvent doesn't recognize react's synthetic event.

Code example:

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

This doesn't work: https://jsfiddle.net/Luktwrdm/456/
Whereas this does: https://jsfiddle.net/7xyyyjc5/1/

class App extends React.Component {
  handleMouseLeave = () => {
    console.log('left');
  };

  handleClose = () => {
    const evt = new MouseEvent('onmouseleave', {
      view: window,
      bubbles: true,
      cancelable: true,
    });

    const ele = document.getElementById('element');
    ele.dispatchEvent(evt);
  };

  render() {
    return (
      <div
        id="element"
        onMouseLeave={this.handleMouseLeave}
      >
        <button onClick={this.handleClose}>
          Close
        </button>
      </div>
    );
  }
}

ReactDOM.render(<App name="world" />, document.getElementById('container'));

Click the button and it doesn't trigger the onMouseLeave event.

What is the expected behavior?

That the MouseEvent sees the synthetic event and handles the onMouseLeave correctly.

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

React version 16.2 - all browsers.
Not that I know of.

[whs-dot-hk]

@DannyvanHolten It works see

https://jsfiddle.net/pLdrau59/9/

and

https://jsfiddle.net/yv6qdchL/11/

I think what you mean here is a child can't fire a parent event?

But if a event can fire everywhere, you don't need react

You can use this instead

https://reactjs.org/docs/portals.html#event-bubbling-through-portals

[DannyvanHolten]

This is not a solution. You just inverted the click and the mouseleave. So on leave it will simulate an onclick, on Click it still doesn't simulate a mouseLeave

[whs-dot-hk]

@DannyvanHolten Yes, that is indeed a bug

I am looking into it now

[philipp-spiess]

Hey @DannyvanHolten! This is due to the way React shims correct onMouseEnter and onMouseLeave support across browses. You can see the shim in the EnterLeaveEventPlugin if you're curious.

Since a browser will fire mouseover and mouseout as well, you can work around this issue by dispatching those events instead:

function simulateMouseMove(from, to) {
  if (from) {
    from.dispatchEvent(
      new MouseEvent('mouseout', {
        bubbles: true,
        cancelable: true,
        relatedTarget: to,
      }),
    );
  }
  if (to) {
    to.dispatchEvent(
      new MouseEvent('mouseover', {
        bubbles: true,
        cancelable: true,
        relatedTarget: from,
      }),
    );
  }

[DannyvanHolten]

Sorry, closed it on accident.

[gaearon]

Doesn't feel like there's an action item here. React is intentionally using different events internally to provide a more solid polyfill.