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

Introduce props keyDownEvents and keyUpEvents #2171

Merged
merged 1 commit into from
Aug 23, 2024

Conversation

Saadnajmi
Copy link
Collaborator

@Saadnajmi Saadnajmi commented Aug 22, 2024

(Note: Anywhere I say keyDownEvent or validKeysDown, assume it also applies to keyUpEvents or validKeysUp)

Summary:

React Native macOS and React Native Windows have different APIs for keyboard events. RNM will by default send no keyboard events to JS (unless specified in validKeysDown, at which point it will suppress native handling of that event). RNW will send all events to JS, and its' prop keyDownEvents only surpasses native handling. This difference has caused real bugs and issues writing cross platform keyboard handling code.

To bridge the gap slightly, #1867 introduced a new macOS only prop passthroughAllKeyEvents, that would tell it's component to send all events to JS. In that PR, we also updated the type of validKeysDown to better resemble keyDownEvents. With that PR in place, this meant setting both validKeysDown and passThroughAllKeyEvents effectively mimicked the behavior of React Native Windows.

Let's take this one step further. Let's introduce the prop keyDownEvents. This prop will, at the level of <View>, simply set passthroughAllKeyEvents to true, and override validKeysDown with the value in keyUpEvents. This way, we need to make no native changes to our keyboard handling code.

Let's introduce this PR to introduce the new props and deprecate the old props in RNM version 0.74 , and then have a followup PR (Probably #1615 ) remove the old props (and update the native handling) in RNM version 0.75

Also in this PR: We were inconsistent about which variants of Touchable had the prop validKeysDown. Let's be consistent: Remove it from all of them, and set it only on Pressable. This matches RNW, and the typescript types.

Test Plan:

Updated the RNTester example to add a new switch to set keyDownEvents. TextInput looks iffy, but we already have disclaimers that the keyboard event API doesn't work quite as well there.

Screen.Recording.2024-08-21.at.11.50.47.PM.mov

@Saadnajmi Saadnajmi force-pushed the deprecate-validkeysdown branch from 5553afc to c0ef244 Compare August 22, 2024 22:01
@Saadnajmi Saadnajmi merged commit 60614dc into microsoft:main Aug 23, 2024
14 checks passed
@Saadnajmi Saadnajmi deleted the deprecate-validkeysdown branch August 23, 2024 00:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants