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-ci
Copy link

codesandbox-ci 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 August 8, 2020 08:01
@sizebot
Copy link

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 => {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@sizebot
Copy link

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 August 8, 2020 08:59
@eps1lon eps1lon force-pushed the fix/focus-event-type branch from ff641a5 to cc2ae0c Compare August 8, 2020 09:59
@gaearon
Copy link
Collaborator

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 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 fix/focus-event-type branch from f98cb9b to 30c564b Compare August 10, 2020 11:42
@gaearon
Copy link
Collaborator

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
@eps1lon eps1lon deleted the fix/focus-event-type branch August 10, 2020 11:59
This was referenced Mar 15, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Bug: event.type no longer matches the listener name for onFocus and onBlur
5 participants