feat(fabric)!: Implement keyboard event handling on View #2699
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Saadnajmi
force-pushed
the
keyboard
branch
3 times, most recently
from
8c1ba9d to
6b76e90
Compare
Summary: This diff adds the `validKeyDown` and `validKeyUp` props to the View component to provide a list of key event matchers used to filter out key event that have to be handled manually by the JS side. These properties were added through the HostPlatformViewProps class to keep the macOS specific properties in a separate file from the iOS ViewProps. Test Plan: Tested later in this stack. Reviewers: shawndempsey, #rn-desktop Reviewed By: shawndempsey Differential Revision: https://phabricator.intern.facebook.com/D53241733 Tasks: T157889406, T154618477
Summary: This diff adds the event emitters that will be used by the keyboard handler of the View component. The `KeyEvent` struct provides the same fields that were previously submitted by Paper. An equals operator between `KeyEvent` and `HandledKey` allows to check if a key event matches the criteria defined by the handled key description. The event emitters were added using the HostPlatformEventEmitter so that the macOS specific changes would be kept separate from the iOS version. Test Plan: Tested later in this stack. Reviewers: shawndempsey, #rn-desktop Reviewed By: shawndempsey Differential Revision: https://phabricator.intern.facebook.com/D53241730 Tasks: T157889406, T154618477
Summary: This diff adds key down/up handling to the View component. The key events are checked against the provided list of key strokes that should be manually handled. If a match is found, the corresponding keyDown/Up event emitter is provided with the captured key even. This will allow the View component to receive keyboard events and respond accordingly. Test Plan: Tested later in this stack. Reviewers: shawndempsey, #rn-desktop Reviewed By: shawndempsey Differential Revision: https://phabricator.intern.facebook.com/D53241731 Tasks: T157889406, T154618477
Summary: This diff fixes a crash happening when a key up/down event was processed by a non-focusable view with no "handled keys" configured on the view. This would lead to an iteration over an optional vector that had no values set. Test Plan: * Run Zeratul with Fabric enabled * Focus the search field * Tab to toggle the focus until it reaches the message thread list * Tab to the next focusable view | Before | After | |--| | https://pxl.cl/4n91l | https://pxl.cl/4n910 | | Crash when tabbing out of thread list | No more crash | Reviewers: shawndempsey, #rn-desktop Reviewed By: shawndempsey Differential Revision: https://phabricator.intern.facebook.com/D53930899
Saadnajmi
changed the title
Saadnajmi
commented
Sep 25, 2025
packages/react-native/ReactCommon/react/renderer/components/view/BaseTouch.cpp
Show resolved
Hide resolved
tido64
reviewed
Sep 29, 2025
packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm
Outdated
Show resolved
Hide resolved
packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm
Outdated
Show resolved
Hide resolved
...erer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewProps.cpp
Outdated
Show resolved
Hide resolved
...nderer/components/view/platform/macos/react/renderer/components/view/HostPlatformViewProps.h
Show resolved
Hide resolved
...mmon/react/renderer/components/view/platform/macos/react/renderer/components/view/KeyEvent.h
Outdated
Show resolved
Hide resolved
Co-authored-by: Tommy Nguyen <4123478+tido64@users.noreply.github.com>
Co-authored-by: Tommy Nguyen <4123478+tido64@users.noreply.github.com>
Co-authored-by: Tommy Nguyen <4123478+tido64@users.noreply.github.com>
…w/RCTViewComponentView.mm Co-authored-by: Tommy Nguyen <4123478+tido64@users.noreply.github.com>
Co-authored-by: Tommy Nguyen <4123478+tido64@users.noreply.github.com>
tido64
approved these changes
Sep 30, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary:
Implement
onKeyDown,onKeyUp,keyDownEvents, andkeyUpEventson View for Fabric.Note:
validKeysDownandvalidKeysUp, so I'm happy to remove and align the two implementations.keyDownEventsandkeyUpEventswere never passed into<View>🤦, which we now fix in this PR. As such, I'll probably backport that fix to older stable branches.Test Plan:
I added a new example to the keyboard events example page in RNTester, which looks quite good :)