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

[react-interactions] Change unmount blur logic to a dedicated event #17291

Merged
merged 1 commit into from
Nov 7, 2019

Conversation

trueadm
Copy link
Contributor

@trueadm trueadm commented Nov 6, 2019

This PR clears up some confusion internally and aligns the behavior of an unmounted node with focus to a specific unique event. This means we can also dispatch a new specific event for this action from the Focus Responder – removing the issues that might arise from mixing it with the existing blur and focus logic. I've opted to call the event detachedvisiblenode or onDetachedVisibleNode – but better names are surely out there!

@codesandbox-ci
Copy link

codesandbox-ci bot commented Nov 6, 2019

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 617fd76:

Sandbox Source
billowing-brook-dbu4z Configuration

@sizebot
Copy link

sizebot commented Nov 6, 2019

Size changes (stable)

Details of bundled changes.

Comparing: 3452706...617fd76

react-interactions

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-interactions-events/focus.production.min.js 🔺+3.8% 🔺+2.8% 4.21 KB 4.37 KB 1.4 KB 1.44 KB NODE_PROD
react-interactions-events/input.development.js 0.0% -0.1% 4.52 KB 4.52 KB 1.45 KB 1.45 KB UMD_DEV
react-interactions-events/press-legacy.production.min.js 0.0% -0.1% 7.22 KB 7.22 KB 2.75 KB 2.74 KB NODE_PROD
react-interactions-events/input.production.min.js 0.0% -0.1% 1.84 KB 1.84 KB 987 B 986 B UMD_PROD
react-interactions-events/swipe.production.min.js 0.0% -0.1% 2.45 KB 2.45 KB 1.11 KB 1.11 KB UMD_PROD
react-interactions-events/hover.development.js 0.0% -0.1% 6.82 KB 6.82 KB 1.51 KB 1.51 KB NODE_DEV
react-interactions-events/scroll.development.js 0.0% -0.1% 6.12 KB 6.12 KB 1.61 KB 1.61 KB NODE_DEV
react-interactions-events/context-menu.development.js 0.0% -0.1% 2.68 KB 2.68 KB 1009 B 1008 B UMD_DEV
react-interactions-events/hover.production.min.js 0.0% -0.1% 2.94 KB 2.94 KB 1.08 KB 1.08 KB NODE_PROD
react-interactions-events/scroll.production.min.js 0.0% -0.1% 2.44 KB 2.44 KB 1.09 KB 1.09 KB NODE_PROD
react-interactions-events/context-menu.production.min.js 0.0% -0.1% 1.39 KB 1.39 KB 731 B 730 B UMD_PROD
react-interactions-events/context-menu.development.js 0.0% -0.1% 2.49 KB 2.49 KB 963 B 962 B NODE_DEV
react-interactions-events/context-menu.production.min.js 0.0% -0.3% 1.2 KB 1.2 KB 671 B 669 B NODE_PROD
react-interactions-events/focus.development.js +3.3% +2.7% 12.19 KB 12.6 KB 2.58 KB 2.64 KB UMD_DEV
react-interactions-events/keyboard.production.min.js 0.0% 🔺+0.1% 2.22 KB 2.22 KB 1.15 KB 1.15 KB NODE_PROD
react-interactions-events/press-legacy.development.js 0.0% -0.0% 24.52 KB 24.52 KB 6.11 KB 6.1 KB UMD_DEV
react-interactions-events/focus.production.min.js 🔺+3.7% 🔺+2.9% 4.38 KB 4.54 KB 1.46 KB 1.5 KB UMD_PROD
react-interactions-events/press-legacy.production.min.js 0.0% -0.0% 7.41 KB 7.41 KB 2.81 KB 2.81 KB UMD_PROD
react-interactions-events/focus.development.js +3.4% +2.7% 12.01 KB 12.41 KB 2.53 KB 2.6 KB NODE_DEV
react-interactions-events/input.development.js 0.0% -0.1% 4.34 KB 4.34 KB 1.4 KB 1.4 KB NODE_DEV
react-interactions-events/swipe.development.js 0.0% -0.1% 5.82 KB 5.82 KB 1.58 KB 1.58 KB NODE_DEV
react-interactions-events/drag.development.js 0.0% -0.1% 5.23 KB 5.23 KB 1.54 KB 1.54 KB UMD_DEV
react-interactions-events/input.production.min.js 0.0% -0.1% 1.66 KB 1.66 KB 919 B 918 B NODE_PROD
react-interactions-events/swipe.production.min.js 0.0% -0.1% 2.27 KB 2.27 KB 1.05 KB 1.05 KB NODE_PROD
react-interactions-events/press.production.min.js 0.0% -0.1% 2.65 KB 2.65 KB 1.1 KB 1.1 KB UMD_PROD
react-interactions-events/drag.development.js 0.0% 0.0% 6.98 KB 6.98 KB 2.21 KB 2.21 KB NODE_DEV
react-interactions-events/press.development.js 0.0% -0.0% 8.78 KB 8.78 KB 2.59 KB 2.59 KB NODE_DEV
react-interactions-events/hover.development.js 0.0% -0.1% 7 KB 7 KB 1.56 KB 1.56 KB UMD_DEV
react-interactions-events/press.production.min.js 0.0% -0.1% 2.36 KB 2.36 KB 1.02 KB 1.02 KB NODE_PROD
react-interactions-events/scroll.development.js 0.0% -0.1% 6.3 KB 6.3 KB 1.66 KB 1.65 KB UMD_DEV
react-interactions-events/hover.production.min.js 0.0% -0.1% 3.12 KB 3.12 KB 1.13 KB 1.13 KB UMD_PROD
react-interactions-events/scroll.production.min.js 0.0% -0.1% 2.63 KB 2.63 KB 1.15 KB 1.15 KB UMD_PROD

Generated by 🚫 dangerJS against 617fd76

@sizebot
Copy link

sizebot commented Nov 6, 2019

Size changes (experimental)

Details of bundled changes.

Comparing: 3452706...617fd76

react-interactions

File Filesize Diff Gzip Diff Prev Size Current Size Prev Gzip Current Gzip ENV
react-interactions-events/hover.development.js 0.0% -0.1% 7.02 KB 7.02 KB 1.57 KB 1.56 KB UMD_DEV
react-interactions-events/press-legacy.development.js 0.0% -0.0% 24.53 KB 24.53 KB 6.11 KB 6.11 KB UMD_DEV
react-interactions-events/hover.production.min.js 0.0% -0.1% 3.13 KB 3.13 KB 1.14 KB 1.14 KB UMD_PROD
react-interactions-events/press-legacy.production.min.js 0.0% -0.0% 7.42 KB 7.42 KB 2.82 KB 2.81 KB UMD_PROD
react-interactions-events/drag.development.js 0.0% -0.1% 5.24 KB 5.24 KB 1.55 KB 1.55 KB UMD_DEV
react-interactions-events/swipe.development.js 0.0% -0.1% 6.01 KB 6.01 KB 1.63 KB 1.63 KB UMD_DEV
react-interactions-events/keyboard.production.min.js 0.0% -0.1% 2.41 KB 2.41 KB 1.22 KB 1.22 KB UMD_PROD
react-interactions-events/swipe.production.min.js 0.0% -0.1% 2.46 KB 2.46 KB 1.12 KB 1.12 KB UMD_PROD
react-interactions-events/drag.development.js 0.0% +0.1% 7 KB 7 KB 2.22 KB 2.22 KB NODE_DEV
react-interactions-events/keyboard.development.js 0.0% -0.0% 5.8 KB 5.8 KB 2.2 KB 2.2 KB NODE_DEV
react-interactions-events/drag.production.min.js 0.0% 🔺+0.1% 2.9 KB 2.9 KB 1.39 KB 1.39 KB NODE_PROD
react-interactions-events/keyboard.production.min.js 0.0% 🔺+0.1% 2.23 KB 2.23 KB 1.16 KB 1.16 KB NODE_PROD
react-interactions-events/swipe.production.min.js 0.0% -0.1% 2.28 KB 2.28 KB 1.06 KB 1.06 KB NODE_PROD
react-interactions-events/input.development.js 0.0% -0.1% 4.54 KB 4.54 KB 1.46 KB 1.45 KB UMD_DEV
react-interactions-events/scroll.development.js 0.0% -0.1% 6.32 KB 6.32 KB 1.67 KB 1.66 KB UMD_DEV
react-interactions-events/context-menu.production.min.js 0.0% -0.3% 1.4 KB 1.4 KB 739 B 737 B UMD_PROD
react-interactions-events/input.production.min.js 0.0% -0.1% 1.85 KB 1.85 KB 995 B 994 B UMD_PROD
react-interactions-events/scroll.production.min.js 0.0% -0.1% 2.64 KB 2.64 KB 1.16 KB 1.16 KB UMD_PROD
ReactEventsFocus-dev.js +4.1% +3.4% 11.97 KB 12.46 KB 2.54 KB 2.63 KB FB_WWW_DEV
ReactEventsFocus-prod.js 🔺+4.5% 🔺+3.3% 8.68 KB 9.07 KB 1.79 KB 1.85 KB FB_WWW_PROD
react-interactions-events/input.development.js 0.0% -0.1% 4.35 KB 4.35 KB 1.41 KB 1.41 KB NODE_DEV
react-interactions-events/scroll.development.js 0.0% -0.1% 6.13 KB 6.13 KB 1.62 KB 1.62 KB NODE_DEV
react-interactions-events/context-menu.production.min.js 0.0% -0.3% 1.21 KB 1.21 KB 681 B 679 B NODE_PROD
react-interactions-events/hover.production.min.js 0.0% -0.1% 2.96 KB 2.96 KB 1.09 KB 1.08 KB NODE_PROD
react-interactions-events/press-legacy.production.min.js 0.0% -0.0% 7.24 KB 7.24 KB 2.75 KB 2.75 KB NODE_PROD
react-interactions-events/focus.development.js +3.3% +2.6% 12.21 KB 12.61 KB 2.58 KB 2.65 KB UMD_DEV
react-interactions-events/focus.production.min.js 🔺+3.6% 🔺+2.9% 4.39 KB 4.55 KB 1.46 KB 1.51 KB UMD_PROD
react-interactions-events/press.production.min.js 0.0% -0.1% 2.66 KB 2.66 KB 1.11 KB 1.11 KB UMD_PROD
react-interactions-events/focus.development.js +3.4% +2.7% 12.02 KB 12.43 KB 2.54 KB 2.61 KB NODE_DEV
react-interactions-events/focus.production.min.js 🔺+3.8% 🔺+2.8% 4.22 KB 4.38 KB 1.41 KB 1.44 KB NODE_PROD
react-interactions-events/press.production.min.js 0.0% -0.1% 2.37 KB 2.37 KB 1.03 KB 1.03 KB NODE_PROD
react-interactions-events/tap.production.min.js 0.0% -0.0% 6.16 KB 6.16 KB 2.33 KB 2.33 KB NODE_PROD

Generated by 🚫 dangerJS against 617fd76

@necolas
Copy link
Contributor

necolas commented Nov 6, 2019

Help me understand why we need this and what the internal confusion is?

@trueadm
Copy link
Contributor Author

trueadm commented Nov 6, 2019

@necolas It's the same reason we needed it before – we want to know when a node (that has active document focus) gets unmounted from the document – so we can restore focus to another nearby node. The issue with overloading it with blur and focus, is that we have no way of knowing from the other events if the heuristic was because it was actually from this codepath. That way we can internally GK this specific logic in case we run into issues.

@trueadm trueadm requested review from bchocho and threepointone and removed request for bchocho November 7, 2019 09:48
@trueadm trueadm merged commit e701632 into facebook:master Nov 7, 2019
@trueadm trueadm deleted the add-related-target branch November 7, 2019 10:27
@necolas
Copy link
Contributor

necolas commented Nov 7, 2019

Why is it called detachvisiblenode rather than say detachActiveElement? Or why not add data to the blur event to indicate if it was caused by the node being removed from the DOM? The latter would avoid us making up some fake native event

@trueadm
Copy link
Contributor Author

trueadm commented Nov 7, 2019

@necolas detachActiveElement would be a better name – I can follow up with that name change next week. We don't want to use blur here because other even responders then need to know about the data being in existence to know there's something special about this event. All of this doesn't need to be perfect for now, as this is only a temporary solution to unblock internal solutions – until we come up with something that can happen outside of the mutation phase (like Sebastian mentioned in the previous diff that I mention in the summary).

I think a better approach would likely to be an entirely different mechanic that we can get around to thinking when we look at the event system as a whole again in the future. I've got a Quip with all these strange odd cases we've run into in regards to events this year – so it's all collected knowledge for requirements we need to handle at a later time.

@necolas
Copy link
Contributor

necolas commented Nov 7, 2019

I don't follow why the new event is a better interim solution, or why a new callback is needed in the responder, when this seems to be a special type of blur event.

@trueadm
Copy link
Contributor Author

trueadm commented Nov 7, 2019

@necolas This is meant for a very bespoke usage right now for accessibility. I might prefix it all with DO_NOT_USE. The alternatives also have drawbacks in that I don't want them to accessible via existing generic APIs or events – as I want this to be restricted until I know all the moving parts work right.

With a new event system, none of this would be exposed inside a focus-like interface, instead the accessibility component would be able to ask ReactDOM to let it know directly.

@necolas
Copy link
Contributor

necolas commented Nov 7, 2019

Ok. Plenty of flare stuff has leaked into production dependencies already, including across platforms, so I'm not convinced what got merged is going to be restricted any better than alternatives that don't expand the API surface.

Do you want us to stamp flare patches with the expectation that we'll remove the entire system in the future?

@trueadm
Copy link
Contributor Author

trueadm commented Nov 7, 2019

I'm not disagreeing with your comments, I'm just saying that these can all be addressed in follow ups. What do you think the better strategy here is for us to apply in a follow up?

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.

5 participants