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

Return and Space keys do not trigger onPress events #1623

Merged
merged 62 commits into from
Jan 12, 2023

Conversation

tom-un
Copy link
Collaborator

@tom-un tom-un commented Jan 6, 2023

Please select one of the following

  • I am removing an existing difference between facebook/react-native and microsoft/react-native-macos 👍
  • I am cherry-picking a change from Facebook's react-native into microsoft/react-native-macos 👍
  • I am making a fix / change for the macOS implementation of react-native
  • I am making a change required for Microsoft usage of react-native

Summary

This is a fix for Issue 1622 . This fixes a regression that was introduced in .68 when the validKeysDown/validKeysUp View props were introduced. Since then various Pressability components (Pressable, and Touchable*) do not trigger onPress events when the Return or Spacebar key is pressed.

The fix involves triggering the onPressIn and onPressOut events in Pressibility's onKeyDown/onKeyUp handlers similar to how react-native-windows also does this: https://github.com/microsoft/react-native-windows/blob/main/vnext/src/Libraries/Pressability/Pressability.windows.js. It also triggers the onPress on key down which mimics how most macOS controls respond to key down as a click in contrast to Windows which triggers onPress on key up.

Logic was also added to RCTView's keyboardEvent: filtering logic: if the view is focusable and it does not have validKeyDown/Up props, it implicitly allows the Return and Spacebar keys.

Changelog

[macOS] [Fix] - Return and Space keys do not trigger onPress events

Test Plan

All the Pressable and Touchable pages in RNTester were tested:
Tom branch

Note that this change is very similar to Saad's PR here: #1614. The changes to Pressability event handlers are identical in both PRs. But in Saad's the validKeysDown prop is giving a default value of Enter and Space in the Pressability.js while this PR makes the default values of the validKeysDown/Up in the native RCTView. The advantage of doing it in the native side means that the Touchable* components also get the correct behavior without making very large scale changes to the various Touchable* files -- Saad's change only fixes Pressable. Also the other PR only makes default values for validKeysDown and not also validKeysUp, so the Press Out effects never trigger leaving the component in a "stuck" state. Here is a sample of the Pressable test in the other branch:

Saad branch

tom-un and others added 30 commits April 3, 2020 20:53
@tom-un tom-un changed the title Draft: Return and Space keys do not trigger onPress events Return and Space keys do not trigger onPress events Jan 8, 2023
@tom-un tom-un marked this pull request as ready for review January 9, 2023 09:33
@tom-un tom-un requested a review from a team as a code owner January 9, 2023 09:33
@tom-un tom-un enabled auto-merge (squash) January 11, 2023 13:43
Copy link
Collaborator

@Saadnajmi Saadnajmi left a comment

Choose a reason for hiding this comment

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

Long term I'd still rather the logic live in JS like in #1614 . However, given that change needs more work and this affects people now, I say we merge/backport this version. If/when #1615 lands, this logic would change anyway.

@tom-un tom-un merged commit 400430a into microsoft:main Jan 12, 2023
Saadnajmi pushed a commit to Saadnajmi/react-native-macos that referenced this pull request Jan 12, 2023
* Update scripts to publish react-native-macos-init

* Clean up merge markers

* Restored ios:macos RNTester parity except for InputAccessoryView.

* Revert "Restored ios:macos RNTester parity except for InputAccessoryView."

This reverts commit 5a67ae0.

* Remove unnecessary android builds and tar file upload.

* Fix pressability enter/return and spacebar key events

* Don't change validKeysDown/Up for components that explicitly set them

* Added event.defaultPrevented check to key events

* Fixed spacing in RCTView.m

* Ignore key event props not matching press events

Co-authored-by: React-Native Bot <[email protected]>
Saadnajmi added a commit that referenced this pull request Jan 12, 2023
* Update scripts to publish react-native-macos-init

* Clean up merge markers

* Restored ios:macos RNTester parity except for InputAccessoryView.

* Revert "Restored ios:macos RNTester parity except for InputAccessoryView."

This reverts commit 5a67ae0.

* Remove unnecessary android builds and tar file upload.

* Fix pressability enter/return and spacebar key events

* Don't change validKeysDown/Up for components that explicitly set them

* Added event.defaultPrevented check to key events

* Fixed spacing in RCTView.m

* Ignore key event props not matching press events

Co-authored-by: React-Native Bot <[email protected]>

Co-authored-by: Tom Underhill <[email protected]>
Co-authored-by: React-Native Bot <[email protected]>
shwanton pushed a commit to shwanton/react-native-macos that referenced this pull request Feb 13, 2023
…icrosoft#1632)

* Update scripts to publish react-native-macos-init

* Clean up merge markers

* Restored ios:macos RNTester parity except for InputAccessoryView.

* Revert "Restored ios:macos RNTester parity except for InputAccessoryView."

This reverts commit 5a67ae0.

* Remove unnecessary android builds and tar file upload.

* Fix pressability enter/return and spacebar key events

* Don't change validKeysDown/Up for components that explicitly set them

* Added event.defaultPrevented check to key events

* Fixed spacing in RCTView.m

* Ignore key event props not matching press events

Co-authored-by: React-Native Bot <[email protected]>

Co-authored-by: Tom Underhill <[email protected]>
Co-authored-by: React-Native Bot <[email protected]>
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.

4 participants