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

Modern Event System: use focusin/focusout for onFocus/onBlur #19186

Merged
merged 1 commit into from Jul 16, 2020

Conversation

@trueadm
Copy link
Member

@trueadm trueadm commented Jun 24, 2020

Note: this PR requires changes in JSDOM, otherwise Jest tests fail. Everything passes when I make the JSDOM changes locally. This PR also includes #19221.

Before the changes in this PR, we mapped onFocus and onBlur to focus and blur, but we did so in the capture phase. Doing so in the capture phase enables us to listen to all events as if they bubbled, which works great when you listen on the document.

With the modern event system, we no longer listen on the document for events, but rather with listen to the React root (or portal) container element. This means that if we listen to focus and blur in the capture phase, they actually occur in reverse order, which can lead to inconsistent UIs if onFocus or onBlur are used like focusin and focusout work (which we have recommended users to do in the past).

This PR alters how the modern event system handles onFocus and onBlur so that they now use focusin and focusout rather than focus and blur. This means we no longer need to listen to these events in the capture phase, ensuring consistentcy when using onFocus and onBlur with the expectation that bubbling order should correctly traverse through containers as expected.

In terms of breaking changes, this change will mean that React will not support Firefox versions earlier than 52. Earlier versions do not support focusin and focusout.

@codesandbox
Copy link

@codesandbox codesandbox bot commented Jun 24, 2020

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit e8205ae:

Sandbox Source
React Configuration
@sizebot
Copy link

@sizebot sizebot commented Jun 24, 2020

No significant bundle size changes to report.

Size changes (experimental)

Generated by 🚫 dangerJS against e8205ae

@sizebot
Copy link

@sizebot sizebot commented Jun 24, 2020

No significant bundle size changes to report.

Size changes (stable)

Generated by 🚫 dangerJS against e8205ae

Copy link
Contributor

@bvaughn bvaughn left a comment

I think this looks okay, obviously barring the JSDOM issue.

@trueadm trueadm force-pushed the trueadm:focusin-focusout branch 7 times, most recently from 1326bb2 to 04209cb Jul 1, 2020
@gaearon
gaearon approved these changes Jul 6, 2020
Copy link
Member

@gaearon gaearon left a comment

Seems ok but I don't see why we don't remove TOP_FOCUS and TOP_BLUR altogether.

packages/react-dom/src/events/DOMEventProperties.js Outdated Show resolved Hide resolved
@trueadm trueadm force-pushed the trueadm:focusin-focusout branch 9 times, most recently from 671aacc to ff22629 Jul 6, 2020
@gaearon
gaearon approved these changes Jul 8, 2020
@trueadm trueadm force-pushed the trueadm:focusin-focusout branch 2 times, most recently from f709fb1 to a196777 Jul 8, 2020
@gaearon gaearon mentioned this pull request Jul 8, 2020
@trueadm trueadm force-pushed the trueadm:focusin-focusout branch 3 times, most recently from a6b4857 to f812fda Jul 8, 2020
Fix test now we use capture phase

Cleanup

Address feedback

Revise

Fix ReactDOMInput-test

Fix
@trueadm trueadm force-pushed the trueadm:focusin-focusout branch from f812fda to e8205ae Jul 10, 2020
@trueadm trueadm merged commit a59f899 into facebook:master Jul 16, 2020
32 checks passed
32 checks passed
Facebook CLA Check Contributor License Agreement is valid!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_build Your tests passed on CircleCI!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_lint_build Your tests passed on CircleCI!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_test Your tests passed on CircleCI!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_test_build Your tests passed on CircleCI!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_test_build_prod Your tests passed on CircleCI!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_test_dom_fixtures Your tests passed on CircleCI!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_test_persistent Your tests passed on CircleCI!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_test_prod Your tests passed on CircleCI!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_test_prod_www Your tests passed on CircleCI!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_test_prod_www_variant Your tests passed on CircleCI!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_test_www Your tests passed on CircleCI!
Details
ci/circleci: RELEASE_CHANNEL_stable_yarn_test_www_variant Your tests passed on CircleCI!
Details
ci/circleci: process_artifacts Your tests passed on CircleCI!
Details
ci/circleci: process_artifacts_experimental Your tests passed on CircleCI!
Details
ci/circleci: setup Your tests passed on CircleCI!
Details
ci/circleci: sizebot_experimental Your tests passed on CircleCI!
Details
ci/circleci: sizebot_stable Your tests passed on CircleCI!
Details
ci/circleci: yarn_build Your tests passed on CircleCI!
Details
ci/circleci: yarn_flow Your tests passed on CircleCI!
Details
ci/circleci: yarn_lint Your tests passed on CircleCI!
Details
ci/circleci: yarn_lint_build Your tests passed on CircleCI!
Details
ci/circleci: yarn_test Your tests passed on CircleCI!
Details
ci/circleci: yarn_test_build Your tests passed on CircleCI!
Details
ci/circleci: yarn_test_build_devtools Your tests passed on CircleCI!
Details
ci/circleci: yarn_test_build_prod Your tests passed on CircleCI!
Details
ci/circleci: yarn_test_prod Your tests passed on CircleCI!
Details
ci/circleci: yarn_test_prod_www Your tests passed on CircleCI!
Details
ci/circleci: yarn_test_prod_www_variant Your tests passed on CircleCI!
Details
ci/circleci: yarn_test_www Your tests passed on CircleCI!
Details
ci/circleci: yarn_test_www_variant Your tests passed on CircleCI!
Details
ci/codesandbox Building packages succeeded.
Details
@trueadm trueadm deleted the trueadm:focusin-focusout branch Jul 16, 2020
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

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