onLongPress does not fire with phsyical keyboard
Description
There is no way to trigger onLongPress or other press events like onPressIn or onPressOut when using a physical keyboard connected to the mobile device. This is a big accessibility issue as it prevents interactions that utilize onLongPress from being keyboard operable in violation of https://www.w3.org/TR/mobile-accessibility-mapping/#keyboard-control-for-touchscreen-devices
Version
0.66.0
Output of npx react-native info
System: OS: macOS 12.1 CPU: (10) x64 Apple M1 Max Memory: 3.20 GB / 64.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 14.19.0 - ~/.nix-profile/bin/node Yarn: 1.19.2 - ~/.nix-profile/bin/yarn npm: 6.14.16 - ~/.nix-profile/bin/npm Watchman: 4.9.0 - /Users/brandon.dail/.nix-profile/bin/watchman Managers: CocoaPods: 1.11.0 - /Users/brandon.dail/.nix-profile/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3 Android SDK: API Levels: 31, 32 Build Tools: 30.0.2 System Images: android-31 | Google Play ARM 64 v8a, android-32 | Google Play ARM 64 v8a Android NDK: Not Found IDEs: Android Studio: 2021.1 AI-211.7628.21.2111.8193401 Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild Languages: Java: 11.0.11 - /Users/brandon.dail/.nix-profile/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: https://github.com/discord/react-native/archive/aa6fc55f1f65a92bc4a10ac4f38cc26d35e6ced2.tar.gz => 0.68.1 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found
Steps to reproduce
- Connect a physical keyboard to an Android or iOS device
- Navigate to any
PressableorViewthat might supportonLongPress - Hold down the
Spacekey on the physical keyboard
Snack, code example, screenshot, or link to a repository
Just render any <Pressable onLongPress={callback}>
Hey @aweary thanks for submitting we'll try to reproduce on our end, and report back. Do you have any details/environments of where you're experiencing these issues?
@alextait1 as far as I can tell it should be reproducible in any environment that is rendering a Pressable with an onLongPress listener. I am using a Logitech K380 Multi-Device Bluetooth Keyboard with both an iOS and Android device.
@aweary , so I did some tests (and have the same keyboard as you even!) and you're correct, right now onLongPress doesn't work with keyboards. The reason for this seems to be that in general Pressability doesn't technically have any support for keyboards baked in. It's relying solely on the OS-level behavior which triggers standard onClick/onTouch events when a user hits enter/spacebar.
On iOS, you can set up a keyboard shortcut for "Touch" (rather than the default spacebar shortcut which triggers "Activate"), and if you hold the key you set down, it does in fact trigger a long-press. Again, this works by the OS simulating an actual touch event that Pressable detects.
On Android there doesn't seem to be a way to create custom keyboard shortcuts, or remap existing ones, and there is unfortunately no shortcut I can find that will trigger a long press.
In theory, this is something that RN could add support for on its own, as both Android and iOS have ways to trigger behavior based on keyboard keypress. If this is something that's blocking you, and you want to put up a PR I'd be happy to review it :)
Just as a follow up here, while Android has no way to customize keyboard shortcuts in a general sense, specific accessibility services can customize their keyboard shortcuts.
Talkback for example, does allow keyboard shortcut customization, and even has a shortcut for long press (Alt+Shift+Enter by default).
So while I think this system could be improved upon (there really should be some OS-level customization here), it would really require an OS update from Google to make this better.
My fear is that if we tried to polyfill this in RN by listening for keypress events that we'd end up in conflict with services that do properly support keyboard shortcuts, and could cause problems for users relying on them.
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.
Hello thread, I wrote a libarary for solving this issue: https://www.npmjs.com/package/react-native-external-keyboard
This library also includes:
- handling component focus
- api for moving keyboard force
- key press hendling
New and old arch are supported.
Hello,
The https://www.npmjs.com/package/react-native-external-keyboard library didn't work. What's the priority of this issue? Is there any timeline as to when the issue will be fixed? Thanks!
Hello @vgowda-indeed,
I am sorry that the react-native-external-keyboard library doesn't help you with your issue.
I would really appreciate it if you could provide some details and create an issue with a description of your problem in react-native-external-keyboard.
Unfortunately, all of my tests reproduced the onLongPress behavior in KeyboardExtendedPressable.
I also would like highlight that iOS has commands feature which blocks onLongPress action by default.
You can find commands here: Settings -> Accessibility -> Keyboards -> Full Keyboard Access -> Commands
I wouldn't recomend to change activate command becouse it can lead to diffrent issues and problems with element focusing.
Thank you in advance, Artur Kalach