Skip to content

Call event.stopPropagation() with keyDownEvents specified. - #8077

Merged
Igor Klemenski (rectified95) merged 5 commits into
microsoft:mainfrom
rectified95:stop_propagation
Jul 8, 2021
Merged

Call event.stopPropagation() with keyDownEvents specified.#8077
Igor Klemenski (rectified95) merged 5 commits into
microsoft:mainfrom
rectified95:stop_propagation

Conversation

@rectified95

@rectified95Igor Klemenski (rectified95) commented Jun 22, 2021

Copy link
Copy Markdown
Contributor

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

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

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

@jonthysellJon Thysell (jonthysell)Jun 22, 2021

Copy link
Copy Markdown
Contributor

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)?

@rectified95Igor Klemenski (rectified95) changed the title Stop propagationCall event.stopPropagation() with keyDownEvents specified.Jun 23, 2021
@rectified95
Igor Klemenski (rectified95) merged commit bc60ec2 into microsoft:mainJul 8, 2021
Saad Najmi (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 freeto 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

@rectified95@NickGerleman@jonthysell