microsoft / microsoft/react-native-windows
keyUpEvents/keyDownEvents check `code`, not `key`
Nobody has claimed this yet.
- Dominant language
- C++
- Stars
- 17.3k
- Forks
- 1.2k
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 33
Description
Problem Description
Per the keyboard API spec, the props keyDownEvents and keyUpEvents are used to specify which events should be marked as handled natively (so that they are only handled in JS). The spec says you specify an array of IHandledKeyboardEvent objects, each of which contains a key field and booleans for the modifier keys:
const handledNativeKeyboardEvents: IHandledKeyboardEvent[] = [
{ key: 'Esc' },
{ key: 'Enter', ctrlKey : true, eventPhase : EventPhase.Capturing }
];
However, if we look a the actual type and implementation , we aren't checking the key field, but instead the code field.
<Pressable
keyDownEvents={[
{code: 'KeyW', handledEventPhase: 3},
{code: 'KeyE', handledEventPhase: 1},
]}
...
>
These two differ quite heavily and make it harder to write cross platform code. Both rn-win32 and rn-macOS check the key field in their respective implementation.
This came up as an issue while I was working on FluentUI React Native, where I'm trying to write cross-platform keyboard handlers and having a very hard time :')
Steps To Reproduce
Look at PressableExample.windows.js and see that all the keyboarding examples have objects that look like [{code: 'keyW'}, {code: 'keyH'}]
Expected Results
Should be more like [{key:'W'},{key:'H'}]
CLI version
n/a
Environment
n/a
Target Platform Version
None
Target Device(s)
Desktop
Visual Studio Version
None
Build Configuration
None
Snack, code example, screenshot, or link to a repository
I guess, this is my keyboard handler. The windows version of it is wrong because it uses key :')
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with vnext/src/Libraries/Components/Keyboard/KeyboardExtProps.ts and vnext/Microsoft.ReactNative/Views/KeyboardEventHandler.cpp, then compare the keyboard API proposal with the rn-win32 and rn-macOS implementations. Check PressableExample.windows.js for the existing examples; done means Windows keyDownEvents and keyUpEvents follow the documented key-based behavior consistently with the other platforms.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- cpp, javascript, react-native, typescript
- Domain
- desktop, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100