Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix mouseenter handlers fired twice #16928

Merged
merged 2 commits into from Oct 1, 2019

Conversation

@yuanoook
Copy link
Contributor

@yuanoook yuanoook commented Sep 27, 2019

The bug

mouseenter handler gets fired twice, in a component ReactDOM.render-ed in another component.

ReactDOM.render(<AnotherComponent />, hostEl, () => {
  ReactDOM.render(<AComponentMouseEnterWronglyFiredTwice />, hostEl.childNodes[1]);
});

function AComponentMouseEnterWronglyFiredTwice() {
     return (<>
        <div
            onMouseEnter={() => {console.log('You may see this twice');}}
        >
            Move mouse TO here
        </div>
        <div>Move mouse FROM here</div>
     </>)
}

The bug issue #16763
The reproduction demo https://codesandbox.io/s/hungry-field-kgkli

The cause

For any event happened in ReactDOM.render-ed component in another component.
In function handleTopLevel(bookKeeping) {...}, we'll get two ancestors (at least) for bookKeeping.

It's ok for most of the events, but mouseenter is different.
mouseenter is extracted out from mouseout/mouseover.

When mouseout gets dealt twice in handleTopLevel in the situation above, mouseenter gets fired twice on the same node.

The fix

EnterLeaveEventPlugin.js

extractEvents(...) {
    ...
    if (isOutEvent && from && nativeEventTarget !== fromNode) {
      return [leave];
    }
    return [leave, enter];
}
@sizebot
Copy link

@sizebot sizebot commented Sep 27, 2019

Details of bundled changes.

Comparing: cdbfa50...3fed177

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-dom.profiling.min.js 0.0% +0.1% 117.34 KB 117.37 KB 36.96 KB 36.99 KB NODE_PROFILING
react-dom-server.browser.development.js 0.0% 0.0% 142.1 KB 142.1 KB 37.12 KB 37.12 KB UMD_DEV
ReactDOM-dev.js 0.0% 0.0% 958.53 KB 958.62 KB 211.05 KB 211.07 KB FB_WWW_DEV
react-dom-test-utils.production.min.js 0.0% 0.0% 11.19 KB 11.19 KB 4.16 KB 4.16 KB UMD_PROD
react-dom-test-utils.development.js 0.0% -0.0% 55.73 KB 55.73 KB 15.49 KB 15.49 KB NODE_DEV
react-dom-test-utils.production.min.js 0.0% 🔺+0.1% 10.96 KB 10.96 KB 4.09 KB 4.09 KB NODE_PROD
react-dom.development.js 0.0% 0.0% 933.73 KB 933.82 KB 210.43 KB 210.45 KB UMD_DEV
react-dom.production.min.js 0.0% 0.0% 113.68 KB 113.71 KB 36.65 KB 36.66 KB UMD_PROD
react-dom.profiling.min.js 0.0% +0.1% 117.23 KB 117.27 KB 37.67 KB 37.69 KB UMD_PROFILING
react-dom.development.js 0.0% 0.0% 927.81 KB 927.9 KB 208.81 KB 208.83 KB NODE_DEV
react-dom.production.min.js 0.0% 0.0% 113.61 KB 113.63 KB 35.96 KB 35.97 KB NODE_PROD
ReactDOM-prod.js -0.1% 0.0% 381.1 KB 380.8 KB 69.51 KB 69.52 KB FB_WWW_PROD
ReactDOM-profiling.js -0.1% 0.0% 387.04 KB 386.74 KB 70.55 KB 70.57 KB FB_WWW_PROFILING
react-dom-server.browser.development.js 0.0% 0.0% 138.04 KB 138.04 KB 36.11 KB 36.11 KB NODE_DEV
react-dom-unstable-native-dependencies.development.js 0.0% -0.0% 60.71 KB 60.71 KB 15.84 KB 15.84 KB UMD_DEV
react-dom-unstable-fizz.node.development.js 0.0% -0.1% 3.87 KB 3.87 KB 1.51 KB 1.51 KB NODE_DEV

Generated by 🚫 dangerJS against 3fed177

@bvaughn bvaughn requested review from trueadm and necolas Sep 27, 2019
@trueadm
trueadm approved these changes Oct 1, 2019
Copy link
Member

@trueadm trueadm left a comment

This is a really good fix – I can confirm that this is indeed an issue. Thank you for this fix and the repro cases!

@trueadm trueadm merged commit b34f042 into facebook:master Oct 1, 2019
13 checks passed
13 checks passed
ci/circleci: build Your tests passed on CircleCI!
Details
ci/circleci: flow Your tests passed on CircleCI!
Details
ci/circleci: lint Your tests passed on CircleCI!
Details
ci/circleci: lint_build Your tests passed on CircleCI!
Details
ci/circleci: process_artifacts Your tests passed on CircleCI!
Details
ci/circleci: setup Your tests passed on CircleCI!
Details
ci/circleci: test_build Your tests passed on CircleCI!
Details
ci/circleci: test_build_devtools Your tests passed on CircleCI!
Details
ci/circleci: test_build_prod Your tests passed on CircleCI!
Details
ci/circleci: test_dom_fixtures Your tests passed on CircleCI!
Details
ci/circleci: test_source Your tests passed on CircleCI!
Details
ci/circleci: test_source_persistent Your tests passed on CircleCI!
Details
ci/circleci: test_source_prod Your tests passed on CircleCI!
Details
This was referenced Oct 30, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

4 participants
You can’t perform that action at this time.