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 #1622

Closed
tom-un opened this issue Jan 6, 2023 · 3 comments
Closed

Return and Space keys do not trigger onPress events #1622

tom-un opened this issue Jan 6, 2023 · 3 comments
Labels
bug Something isn't working Needs: Triage 🔍 Stale

Comments

@tom-un
Copy link
Collaborator

tom-un commented Jan 6, 2023

Environment

react-native -v: 0.68.57-microsoft.0
npm ls react-native-macos: 0.68.57
node -v: v16.17.1
npm -v: 8.15.0
yarn --version: 1.22.19
xcodebuild -version: Xcode 14.1 Build version 14B47b

Steps to reproduce the bug

  1. Go to System Settings and enable Keyboard Navigation:

KeyboardNavigation

  1. In RNTester, go to the Pressable page

  2. Press the Tab key to move the focus ring to a Presable

  3. Press Return key or Space bar

Expected Behavior

Pressing Return or Space should trigger the press of the Pressable

Actual Behavior

The system Beep chimes and no press event is triggered
ReturnKeyNOP

Reproducible Demo

No response

Additional context

This is a regression starting in .68.
.68 introduced the validKeysDown prop. It seems like Touchable and Pressable should have "enter" and "space" on by default.

@tom-un tom-un added the bug Something isn't working label Jan 6, 2023
@ghost ghost added the Needs: Triage 🔍 label Jan 6, 2023
@tom-un tom-un changed the title Describe the problem Return and Space keys do not trigger onPress events Jan 6, 2023
@Saadnajmi
Copy link
Collaborator

I actually have a draft PR out for this: #1614

However, I think the better long term thing to do is deprecate our 'validKeysDown' prop in favor of 'keyDownEvents', the prop used in React Native Windows for a few reasons:

  1. In React Native Windows, all keyboard events are sent to JS. 'keyDownEvents' just specifies which keyboard events should have their native behavior suppressed. This is more flexible to JS developers than our 'validKeysDown' prop where only the events we specify are sent to This difference isn't obvious and leads to bugs like the one here.

  2. keyDownEvents is better documented, and the prop that is in the actual apex: https://github.com/microsoft/react-native-windows/blob/main/vnext/proposals/active/keyboard-reconcile-desktop.md

  3. The same prop and behavior makes it easier to write cross platform code. I've had a lot of bugs trying to write cross platform keyboard handlers in FluentUI React Native.

I have another draft PR out to switch us to the new prop: #1615

Both PRs are on my backlog, and I wasn't any to merge either soon. If this issue is blocking, I can prioritize the first one perhaps.

@tom-un
Copy link
Collaborator Author

tom-un commented Jan 6, 2023

Oh, great! I also made a draft PR with a fix here: https://github.com/microsoft/react-native-macos/pull/1623/files.

Its nearly the same as your except instead of fixing the "validKeys" collection in the JS, I fixed it in the native RCTView.m code as I was having trouble fixing all the Pressability components -- Pressable just worked, but the various Touchables did not. I'll test your branch. One problem I see in your branch tho: you test for 'Enter'" and 'Space', but on macOS the spacebar event is actually ' '. Perhaps another thing that should be fixed for consistency with Windows.

It is a priority for us as its an accessibility regression since .68

@github-actions
Copy link

github-actions bot commented Jul 6, 2023

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working Needs: Triage 🔍 Stale
Projects
None yet
Development

No branches or pull requests

2 participants