Skip to content

fix: onFocus/onBlur/onBeforeInput have a matching event type - #19561

Merged
gaearon merged 8 commits into
react:masterfrom
eps1lon:fix/focus-event-type
Aug 10, 2020
Merged

fix: onFocus/onBlur/onBeforeInput have a matching event type#19561
gaearon merged 8 commits into
react:masterfrom
eps1lon:fix/focus-event-type

Conversation

@eps1lon

@eps1lon eps1lon commented Aug 8, 2020

Copy link
Copy Markdown
Collaborator

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

codesandbox-ci Bot commented Aug 8, 2020

Copy link
Copy Markdown

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

sizebot commented Aug 8, 2020

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

const table = [[forcePointerEvents], [!forcePointerEvents]];

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

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

sizebot commented Aug 8, 2020

Copy link
Copy Markdown
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
Comment thread packages/react-dom/src/events/plugins/SimpleEventPlugin.js Outdated
@gaearon

gaearon commented Aug 8, 2020

Copy link
Copy Markdown
Collaborator

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

@eps1lon

eps1lon commented Aug 8, 2020

Copy link
Copy Markdown
Collaborator Author

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

gaearon commented Aug 10, 2020

Copy link
Copy Markdown
Collaborator

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 react:master Aug 10, 2020
@eps1lon
eps1lon deleted the fix/focus-event-type branch August 10, 2020 11:59
This was referenced Mar 15, 2021
mrizwanashiq pushed a commit to mrizwanashiq/react that referenced this pull request Jun 25, 2026
…9561)

* test: Add current behavior for event types of onFocus/onBlur

* fix: onFocus/onBlur have a matching event type

* fix useFocus

* fix: don't compare native event types with react event types

* Add FocusIn/FocusOutEventInterface

* A simpler alternative fix

* Add regression tests

* Always pass React event type and fix beforeinput

Co-authored-by: Dan Abramov <dan.abramov@me.com>
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