Skip to content

Conversation

@necolas
Copy link
Contributor

@necolas necolas commented Jul 17, 2019

FocusWithin is implemented as a separate responder, which keeps both focus
responders simple and allows for easier composition of behaviours.

Demo https://codesandbox.io/s/focuswithin-byl1q

Close #15848

@sizebot
Copy link

sizebot commented Jul 17, 2019

Details of bundled changes.

Comparing: 424099d...7bfb5bd

react-events

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-events-focus-scope.development.js 0.0% -0.2% 4.14 KB 4.14 KB 1.27 KB 1.27 KB UMD_DEV
react-events-focus-scope.production.min.js 0.0% -0.3% 1.74 KB 1.74 KB 912 B 909 B UMD_PROD
react-events-hover.development.js 0.0% -0.1% 7.72 KB 7.72 KB 1.96 KB 1.96 KB UMD_DEV
react-events-drag.development.js 0.0% -0.1% 5.82 KB 5.82 KB 1.63 KB 1.62 KB UMD_DEV
react-events-hover.production.min.js 0.0% -0.1% 3.52 KB 3.52 KB 1.35 KB 1.35 KB UMD_PROD
ReactEventsFocus-dev.js +51.3% +17.6% 7.06 KB 10.69 KB 1.78 KB 2.1 KB FB_WWW_DEV
react-events-drag.production.min.js 0.0% -0.2% 2.49 KB 2.49 KB 1.12 KB 1.12 KB UMD_PROD
ReactEventsFocus-prod.js 🔺+49.6% 🔺+16.4% 5.93 KB 8.87 KB 1.4 KB 1.63 KB FB_WWW_PROD
react-events-hover.development.js 0.0% -0.1% 7.54 KB 7.54 KB 1.91 KB 1.91 KB NODE_DEV
react-events-drag.development.js 0.0% -0.0% 7.57 KB 7.57 KB 2.28 KB 2.28 KB NODE_DEV
react-events-hover.production.min.js 0.0% -0.1% 3.34 KB 3.34 KB 1.27 KB 1.27 KB NODE_PROD
react-events-drag.production.min.js 0.0% -0.1% 3.12 KB 3.12 KB 1.42 KB 1.42 KB NODE_PROD
react-events-press.development.js 0.0% -0.0% 28.91 KB 28.91 KB 6.84 KB 6.83 KB UMD_DEV
react-events-swipe.development.js 0.0% -0.1% 6.1 KB 6.1 KB 1.68 KB 1.67 KB UMD_DEV
react-events-press.production.min.js 0.0% -0.1% 8.98 KB 8.98 KB 3.22 KB 3.22 KB UMD_PROD
react-events-swipe.production.min.js 0.0% -0.2% 2.58 KB 2.58 KB 1.16 KB 1.16 KB UMD_PROD
react-events-press.development.js 0.0% -0.0% 28.73 KB 28.73 KB 6.78 KB 6.78 KB NODE_DEV
react-events-swipe.development.js 0.0% -0.1% 5.92 KB 5.92 KB 1.63 KB 1.63 KB NODE_DEV
react-events-press.production.min.js 0.0% -0.1% 8.79 KB 8.79 KB 3.16 KB 3.16 KB NODE_PROD
react-events-swipe.production.min.js 0.0% -0.2% 2.4 KB 2.4 KB 1.1 KB 1.1 KB NODE_PROD
react-events-focus-scope.development.js 0.0% -0.2% 3.96 KB 3.96 KB 1.22 KB 1.22 KB NODE_DEV
react-events-focus-scope.production.min.js 0.0% -0.2% 1.55 KB 1.55 KB 830 B 828 B NODE_PROD
react-events-focus.development.js +50.3% +16.2% 7.12 KB 10.71 KB 1.81 KB 2.1 KB UMD_DEV
react-events-scroll.development.js 0.0% -0.1% 5.64 KB 5.64 KB 1.54 KB 1.54 KB UMD_DEV
react-events-focus.production.min.js 🔺+40.1% 🔺+15.1% 3.02 KB 4.23 KB 1.15 KB 1.32 KB UMD_PROD
react-events-scroll.production.min.js 0.0% -0.3% 2.35 KB 2.35 KB 1.07 KB 1.07 KB UMD_PROD
react-events-focus.development.js +51.6% +16.7% 6.94 KB 10.52 KB 1.76 KB 2.05 KB NODE_DEV
react-events-scroll.development.js 0.0% -0.1% 5.46 KB 5.46 KB 1.48 KB 1.48 KB NODE_DEV
react-events-focus.production.min.js 🔺+42.8% 🔺+16.0% 2.84 KB 4.05 KB 1.08 KB 1.25 KB NODE_PROD
react-events-scroll.production.min.js 0.0% -0.2% 2.16 KB 2.16 KB 1012 B 1010 B NODE_PROD

Generated by 🚫 dangerJS

@necolas necolas force-pushed the react-events/focus-within branch from 7fcece3 to 0d5ff14 Compare July 17, 2019 21:45
@trueadm
Copy link
Contributor

trueadm commented Jul 17, 2019

Does it make sense to use focusIn/focusOut for the new responder? Shane about the code duplication too, the Focus module size is quite a bit bigger than before :/ we can come back to that though.

@necolas
Copy link
Contributor Author

necolas commented Jul 17, 2019

Does it make sense to use focusIn/focusOut for the new responder?

What do you mean?

Shame about the code duplication too, the Focus module size is quite a bit bigger than before

It's only 0.2 KB larger gzipped after adding new functionality.

@necolas necolas force-pushed the react-events/focus-within branch from 0d5ff14 to 7e2b716 Compare July 17, 2019 21:50
Copy link
Contributor

@devongovett devongovett left a comment

Choose a reason for hiding this comment

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

I like this idea. Forcing everything into a single responder proved difficult. Thanks for taking this over btw, and sorry I never came back to the old PR.

...(focusWithinVisible && focusWithinVisibleStyles)
}}
>
</Focus>
Copy link
Contributor

Choose a reason for hiding this comment

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

Should be </FocusWithin>

FocusWithin is implemented as a separate responder, which keeps both focus
responders simple and allows for easier composition of behaviours.

Close facebook#15848
@necolas necolas force-pushed the react-events/focus-within branch from 7e2b716 to 7bfb5bd Compare July 17, 2019 22:06
@necolas necolas merged commit 997154b into facebook:master Jul 17, 2019
@sebmarkbage
Copy link
Collaborator

Hm. This is the exact use case that I was thinking about for the Focal hooks. useFocus, useHover etc. are all "within".

What's the use case for this that the useListener hooks wouldn't be sufficient for?

@necolas
Copy link
Contributor Author

necolas commented Jul 18, 2019

In the current design? How are you expecting useFocus to work? If it's listening to focus/blur events coming from <Focus> in the subtree it's going to fire those pairs every time focus moves, which isn't what this does.

@necolas necolas deleted the react-events/focus-within branch July 18, 2019 15:23
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.

6 participants