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: onFocus/onBlur/onBeforeInput have a matching event type #19561

Merged
merged 8 commits into from Aug 10, 2020

Conversation

@eps1lon
Copy link
Collaborator

@eps1lon eps1lon commented Aug 8, 2020

Summary

So far event.type always matched the listener name in React even though the underlying native event might be a different type (e.g. onMouseEnter). The recent changes to focus events made onFocus and onBlur the only two events whose event.type did not match (onFocus -> focusin, onBlur -> focusout).

This PR restores the previous event types.

Closes #19560

Test Plan

  • CI green
  • observe expected behavior codesandbox in original issue

It might make sense to write a regression test suite (similar to #19483) for all event types since it seems that event.type isn't tested. I could split this work up into two PRs (one for the test, one for the fix) in case you need to revert the fix.

@eps1lon eps1lon changed the title Fix/focus event type fix: onFocus/onBlur have a matching event type Aug 8, 2020
@codesandbox
Copy link

@codesandbox codesandbox bot commented Aug 8, 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 30c564b:

Sandbox Source
React Configuration
event.type in react@next Issue #19560
@eps1lon eps1lon marked this pull request as draft Aug 8, 2020
@sizebot
Copy link

@sizebot sizebot commented Aug 8, 2020

Details of bundled changes.

Comparing: 0cd9a6d...30c564b

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-dom.development.js 0.0% 0.0% 912.3 KB 912.53 KB 207.26 KB 207.29 KB NODE_DEV
ReactDOMForked-prod.js 🔺+0.1% 🔺+0.1% 379.41 KB 379.96 KB 70.05 KB 70.12 KB FB_WWW_PROD
react-dom-server.node.development.js 0.0% 0.0% 138.51 KB 138.51 KB 36.61 KB 36.61 KB NODE_DEV
react-dom.production.min.js 0.0% 0.0% 123.84 KB 123.88 KB 39.67 KB 39.67 KB NODE_PROD
ReactDOMForked-profiling.js +0.1% +0.1% 394.32 KB 394.88 KB 72.78 KB 72.84 KB FB_WWW_PROFILING
react-dom-server.browser.development.js 0.0% 0.0% 144.69 KB 144.69 KB 36.8 KB 36.8 KB UMD_DEV
react-dom-server.node.production.min.js 0.0% 0.0% 20.66 KB 20.66 KB 7.65 KB 7.66 KB NODE_PROD
react-dom-test-utils.production.min.js 🔺+0.1% 🔺+0.1% 12.86 KB 12.87 KB 5.04 KB 5.05 KB UMD_PROD
ReactDOMTesting-dev.js 0.0% 0.0% 920.55 KB 920.85 KB 207.05 KB 207.09 KB FB_WWW_DEV
react-dom-test-utils.development.js +0.1% +0.1% 60.81 KB 60.86 KB 17.63 KB 17.65 KB NODE_DEV
ReactDOMTesting-prod.js 🔺+0.1% 🔺+0.1% 378.57 KB 379.13 KB 71.2 KB 71.26 KB FB_WWW_PROD
react-dom-unstable-fizz.node.development.js 0.0% +0.1% 5.52 KB 5.52 KB 1.84 KB 1.84 KB NODE_DEV
react-dom-test-utils.production.min.js 🔺+0.1% 0.0% 12.71 KB 12.72 KB 4.97 KB 4.97 KB NODE_PROD
react-dom-unstable-fizz.browser.development.js 0.0% +0.3% 5.27 KB 5.27 KB 1.78 KB 1.78 KB UMD_DEV
react-dom-unstable-fizz.browser.production.min.js 0.0% 🔺+0.1% 1.2 KB 1.2 KB 704 B 705 B UMD_PROD
ReactTestUtils-dev.js +0.1% +0.1% 55.13 KB 55.21 KB 15.46 KB 15.48 KB FB_WWW_DEV
react-dom-unstable-fizz.browser.development.js 0.0% +0.1% 4.78 KB 4.78 KB 1.68 KB 1.68 KB NODE_DEV
react-dom.development.js 0.0% 0.0% 958.48 KB 958.72 KB 209.8 KB 209.84 KB UMD_DEV
react-dom-unstable-fizz.browser.production.min.js 0.0% 🔺+0.2% 1.01 KB 1.01 KB 615 B 616 B NODE_PROD
react-dom.production.min.js 0.0% 0.0% 123.72 KB 123.76 KB 40.37 KB 40.39 KB UMD_PROD
react-dom.profiling.min.js 0.0% +0.1% 128.9 KB 128.95 KB 41.98 KB 42.02 KB UMD_PROFILING
ReactDOMForked-dev.js 0.0% 0.0% 967.15 KB 967.44 KB 215.22 KB 215.25 KB FB_WWW_DEV
react-dom.profiling.min.js 0.0% -0.0% 129.22 KB 129.26 KB 41.26 KB 41.26 KB NODE_PROFILING
react-dom-server.browser.production.min.js 0.0% 0.0% 20.33 KB 20.33 KB 7.54 KB 7.54 KB UMD_PROD
ReactDOM-dev.js 0.0% 0.0% 960.24 KB 960.54 KB 214.31 KB 214.34 KB FB_WWW_DEV
ReactDOM-prod.js 🔺+0.1% 🔺+0.1% 376.43 KB 376.99 KB 69.46 KB 69.52 KB FB_WWW_PROD
react-dom-server.browser.development.js 0.0% 0.0% 137.24 KB 137.24 KB 36.36 KB 36.36 KB NODE_DEV
ReactDOM-profiling.js +0.1% +0.1% 390.48 KB 391.04 KB 72.1 KB 72.16 KB FB_WWW_PROFILING
react-dom-server.browser.production.min.js 0.0% 0.0% 20.24 KB 20.24 KB 7.5 KB 7.5 KB NODE_PROD
ReactDOMServer-dev.js 0.0% 0.0% 142.94 KB 142.94 KB 36.34 KB 36.34 KB FB_WWW_DEV
ReactDOMServer-prod.js 0.0% 0.0% 46.44 KB 46.44 KB 10.83 KB 10.83 KB FB_WWW_PROD
react-dom-test-utils.development.js +0.1% +0.1% 65.82 KB 65.88 KB 18.16 KB 18.18 KB UMD_DEV

ReactDOM: size: 🔺+0.1%, gzip: 🔺+0.1%

Size changes (experimental)

Generated by 🚫 dangerJS against 30c564b

@@ -36,7 +36,7 @@ function initializeModules(hasPointerEvents) {
const forcePointerEvents = true;
const table = [[forcePointerEvents], [!forcePointerEvents]];

describe.each(table)(`useFocus`, hasPointerEvents => {
describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {

This comment has been minimized.

@eps1lon

eps1lon Aug 8, 2020
Author Collaborator

was slightly confusing why we had two tests with the same name.

@sizebot
Copy link

@sizebot sizebot commented Aug 8, 2020

Details of bundled changes.

Comparing: 0cd9a6d...30c564b

react-dom

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-dom.development.js 0.0% 0.0% 876.49 KB 876.72 KB 200.71 KB 200.74 KB NODE_DEV
ReactDOMForked-prod.js 🔺+0.1% 🔺+0.1% 390.55 KB 391.11 KB 71.8 KB 71.87 KB FB_WWW_PROD
react-dom-server.node.development.js 0.0% 0.0% 137 KB 137 KB 36.4 KB 36.4 KB NODE_DEV
react-dom.production.min.js 0.0% 0.0% 119.23 KB 119.27 KB 38.31 KB 38.31 KB NODE_PROD
ReactDOMForked-profiling.js +0.1% +0.1% 405.53 KB 406.09 KB 74.52 KB 74.59 KB FB_WWW_PROFILING
react-dom-server.browser.development.js 0.0% 0.0% 143.1 KB 143.1 KB 36.6 KB 36.61 KB UMD_DEV
react-dom-server.node.production.min.js 0.0% 0.0% 20.2 KB 20.2 KB 7.58 KB 7.58 KB NODE_PROD
react-dom-test-utils.production.min.js 🔺+0.1% 🔺+0.1% 12.84 KB 12.86 KB 5.03 KB 5.04 KB UMD_PROD
ReactDOMTesting-dev.js 0.0% 0.0% 948.61 KB 948.9 KB 212.55 KB 212.61 KB FB_WWW_DEV
react-dom-test-utils.development.js +0.1% +0.1% 60.79 KB 60.85 KB 17.63 KB 17.64 KB NODE_DEV
ReactDOMTesting-prod.js 🔺+0.1% 🔺+0.1% 391.2 KB 391.76 KB 73.29 KB 73.34 KB FB_WWW_PROD
react-dom-test-utils.production.min.js 🔺+0.1% 0.0% 12.7 KB 12.71 KB 4.96 KB 4.96 KB NODE_PROD
ReactTestUtils-dev.js +0.1% +0.1% 55.13 KB 55.21 KB 15.46 KB 15.48 KB FB_WWW_DEV
react-dom.development.js 0.0% 0.0% 920.92 KB 921.16 KB 203.21 KB 203.25 KB UMD_DEV
react-dom.production.min.js 0.0% 🔺+0.1% 119.17 KB 119.22 KB 38.94 KB 38.96 KB UMD_PROD
react-dom.profiling.min.js 0.0% +0.1% 123.07 KB 123.11 KB 40.16 KB 40.19 KB UMD_PROFILING
ReactDOMForked-dev.js 0.0% 0.0% 992.64 KB 992.93 KB 219.99 KB 220.04 KB FB_WWW_DEV
react-dom.profiling.min.js 0.0% 0.0% 123.3 KB 123.34 KB 39.55 KB 39.57 KB NODE_PROFILING
react-dom-server.browser.production.min.js 0.0% 0.0% 19.87 KB 19.87 KB 7.45 KB 7.45 KB UMD_PROD
ReactDOM-dev.js 0.0% 0.0% 985.73 KB 986.02 KB 218.99 KB 219.05 KB FB_WWW_DEV
ReactDOM-prod.js 🔺+0.1% 🔺+0.1% 387.58 KB 388.14 KB 71.16 KB 71.23 KB FB_WWW_PROD
react-dom-server.browser.development.js 0.0% 0.0% 135.73 KB 135.73 KB 36.15 KB 36.15 KB NODE_DEV
ReactDOM-profiling.js +0.1% +0.1% 401.69 KB 402.25 KB 73.79 KB 73.86 KB FB_WWW_PROFILING
react-dom-server.browser.production.min.js 0.0% 0.0% 19.78 KB 19.78 KB 7.42 KB 7.42 KB NODE_PROD
ReactDOMServer-dev.js 0.0% 0.0% 146.97 KB 146.97 KB 37.34 KB 37.34 KB FB_WWW_DEV
ReactDOMServer-prod.js 0.0% 0.0% 47.3 KB 47.3 KB 11.04 KB 11.04 KB FB_WWW_PROD
react-dom-test-utils.development.js +0.1% +0.1% 65.81 KB 65.86 KB 18.15 KB 18.17 KB UMD_DEV

ReactDOM: size: 🔺+0.1%, gzip: 🔺+0.1%

Size changes (stable)

Generated by 🚫 dangerJS against 30c564b

@eps1lon eps1lon marked this pull request as ready for review Aug 8, 2020
@eps1lon eps1lon force-pushed the eps1lon:fix/focus-event-type branch from ff641a5 to cc2ae0c Aug 8, 2020
@gaearon
Copy link
Member

@gaearon gaearon commented Aug 8, 2020

Hmm. I was hoping we could do this with a bit less code than creating two more functions etc. Any other ideas?

@eps1lon
Copy link
Collaborator Author

@eps1lon eps1lon commented Aug 8, 2020

Hmm. I was hoping we could do this with a bit less code than creating two more functions etc. Any other ideas?

  • Go the same route as the EnterLeaveEventPlugin
    This is probably even more code.
  • always set event.type = reactName.slice(2).toLowerCase()
    We're back to the original approach where we do unnecessary work for almost all events.

In the end we had one component that relied on event.type and we should be able to refactor that code to use two different event handlers instead of one that branches based on event.type. Since it seems like you're preparing a major release it's somewhat safe to do. Maybe wait a bit to see if others have feedback integrating with react@next?

@gaearon gaearon force-pushed the eps1lon:fix/focus-event-type branch from f98cb9b to 30c564b Aug 10, 2020
@gaearon
Copy link
Member

@gaearon gaearon commented Aug 10, 2020

I pushed a different fix. We already have a switch so we can just reuse it to set the type. In fact we can make type an argument to SyntheticEvent and always force plugins to pass it. This actually exposes an issue in onBeforeInput which has always had the same bug. Since it's inconsistent (and I couldn't find any place at FB that relies on this), I patched it too.

Added a regression suite.

@gaearon gaearon changed the title fix: onFocus/onBlur have a matching event type fix: onFocus/onBlur/onBeforeInput have a matching event type Aug 10, 2020
@gaearon gaearon merged commit 7f696bd into facebook:master Aug 10, 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
@eps1lon eps1lon deleted the eps1lon:fix/focus-event-type branch Aug 10, 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.

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