React: Bug: mouseEnter fires twice in react@next

[eps1lon]

React version: 0.0.0-f77c7b9d7
Browser: Chrome Version 84.0.4147.105 (Official Build) (64-bit)
OS: Ubuntu 18.04.4 LTS

Steps To Reproduce

1. move mouse over button

Link to code example:

https://codesandbox.io/s/mouseenter-in-reactnext-ibld3?file=/src/Demo.js

The current behavior

onMouseEnter fires twice (sometimes it doesn't).

The expected behavior

It fires only once. Same repro with [email protected]: https://codesandbox.io/s/mouseenter-in-react16131-9sr7b?file=/src/Demo.js

[Manuelandro]

hei, I'd like to give a shot on this but, stupid question, it's my first time and I don't know which branch points to the next version. I didn't find any useful tip on the contribution guide about how to navigate across versions in cloned repo

[silam]

When I tested on this issue with react next https://codesandbox.io/s/mouseenter-in-reactnext-ibld3?file=/src/Demo.js
I see event gets fired twice
But at the repo [email protected]: https://codesandbox.io/s/mouseenter-in-react16131-9sr7b?file=/src/Demo.js
I see only once.
I could work with you if any one is finding some hint!
Let me could compare two versions of react to see what the difference is.

[gaearon]

Development happens on master, so that's where the "next" code lives. I would look at EnterLeaveEventPlugin and how the events it's extracting are different from the last stable release.

The last release had this block of code:

https://github.com/facebook/react/blob/da834083cccb6ef942f701c6b6cecc78213196a8/packages/react-dom/src/events/EnterLeaveEventPlugin.js#L67-L77

On master it's different:

https://github.com/facebook/react/blob/0cd9a6de557f44dcfe79a4f287ca04b05d674bdc/packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js#L59-L72

I wonder if this is what's failing to filter the other event out. Maybe that logic doesn't fully make sense.

[gaearon]

It would be good to know why tests like this aren't failing.

https://github.com/facebook/react/blob/0cd9a6de557f44dcfe79a4f287ca04b05d674bdc/packages/react-dom/src/__tests__/ReactDOMFiber-test.js#L969-L970

[eps1lon]

Fixing the failing tests of https://github.com/facebook/react/pull/19567 or alternatively make sure that

  it('does not fire mouseEnter twice', () => {
    const ops = [];
    let target = null;

    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,
          }),
        );
      }
    }

    ReactDOM.render(
      <div onMouseEnter={() => ops.push('enter')} ref={n => (target = n)} />,
      container,
    );

    simulateMouseMove(target.parentElement, target);
    expect(ops).toEqual(['enter']);
  });

is passing seems like a good start

[gaearon]

@eps1lon Have you had a chance to diagnose why this is happening?

[eps1lon]

@eps1lon Have you had a chance to diagnose why this is happening?

Didn't have time for it yet. Can't say if I'll get to it this week.

[gaearon]

Got it! I'll look now to unblock the release.