Skip to content

Conversation

@rectified95
Copy link
Contributor

@rectified95 rectified95 commented Jun 22, 2021

The key(Down|Up)Events props control whether the event handling should be left exclusively to the JS, or at least the native processing should stop at the native control emitting it. This is to match this behavior on the JS side, by hooking into the onKeyDown|Capture callback and using event.stopPropagation() on the keys specified in keyDownEvents.

The change is in View and so works for Pressable too. I've made sure that the existing hooks in Pressable, which special-case Space continue to work with this.

Closes #5822

Microsoft Reviewers: Open in CodeFlow

@rectified95 rectified95 requested a review from a team as a code owner June 22, 2021 02:07
Copy link
Contributor

@NickGerleman NickGerleman left a comment

Choose a reason for hiding this comment

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

Cc @rozele

const _keyUp = (event: KeyEvent) => {
if (props.keyUpEvents && !event.isPropagationStopped) {
for (const el of props.keyUpEvents) {
if (event.nativeEvent.code == el.code && el.handledEventPhase == 3) {
Copy link
Contributor

@jonthysell jonthysell Jun 22, 2021

Choose a reason for hiding this comment

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

Is there a constant somewhere we can use (or define) so as to not require a magic number here (and elsewhere)?

@rectified95 rectified95 changed the title Stop propagation Call event.stopPropagation() with keyDownEvents specified. Jun 23, 2021
@rectified95 rectified95 merged commit bc60ec2 into microsoft:main Jul 8, 2021
Saadnajmi added a commit to microsoft/react-native-macos that referenced this pull request Oct 9, 2025
…2720)

## Summary:

Two changes:

- Similar to microsoft/react-native-windows#8077
, we would like to have JS event propagation (as well as native) stop if
`keyDownEvents` or `keyUpEvents` is specified.
- Add `Space` and `Enter` as default keyDown events for Pressable, to
more closely match a button.

## Test Plan:

Updated the test page:
![Screenshot 2025-10-07 at 5 29
00 PM](https://github.com/user-attachments/assets/9b2b5360-3b44-4221-b3ef-6856feb551f1)

---------

Co-authored-by: Tommy Nguyen <4123478+tido64@users.noreply.github.com>
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.

Implement event.stopPropagation() when keyboarding declarative properties are set

3 participants