Skip to content

Conversation

@HeyImChris
Copy link

@HeyImChris HeyImChris commented Feb 4, 2021

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

Addresses this issue

Align more closely with the Windows API set and add Escape and Enter support.

Win spec
Generic Msft event handler ref

TODO: Once this merges it needs to be cherry picked into the 0.62-stable and 0.63-stable branches.

Changelog

[macOS] [Bug] - enter, escape keyboarding support

Test Plan

Tested valid keys in RNTester

Screen Shot 2021-02-03 at 11 36 11 PM

Microsoft Reviewers: Open in CodeFlow

@HeyImChris HeyImChris requested a review from alloy as a code owner February 4, 2021 07:16
@HeyImChris HeyImChris linked an issue Feb 4, 2021 that may be closed by this pull request
@HeyImChris HeyImChris self-assigned this Feb 4, 2021
acceptsKeyboardFocus={true}
enableFocusRing={true}
validKeysDown={['a', 'b', 'x', 'rightArrow']}
validKeysDown={['g', 'Esc', 'Enter', 'ArrowLeft']}

Choose a reason for hiding this comment

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

can we also include combination keydown input? like enter should be differently recognized from enter+ctrl

Copy link
Collaborator

Choose a reason for hiding this comment

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

+1, but I don't mind if we leave that for later


In reply to: 570401738 [](ancestors = 570401738)

Copy link
Author

Choose a reason for hiding this comment

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

We don't quite have that but we do pass all modifier keys back to clients along with the key press so clients can still filter by ctrl+enter vs. enter

Copy link

Choose a reason for hiding this comment

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

Sorry, late to the PRty 😉 - in RNW this is represented with the keyUpEvents prop, which is an array of objects that do specify modifier keys as well. Also, it uses down "Escape", which is correct according to the standard. The Keyboard API doc actually incorrectly uses "Esc", but RNW is doing the right thing. cc @harinikmsft

Copy link
Collaborator

@nakambo nakambo left a comment

Choose a reason for hiding this comment

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

:shipit:

@HeyImChris HeyImChris merged commit fde4113 into microsoft:master Feb 4, 2021
HeyImChris added a commit to HeyImChris/react-native-macos that referenced this pull request Feb 4, 2021
* Update RCTCxxBridge.mm

* escape, enter support, align more tightly with win

* Update tests

* improve arrow js compatibility
HeyImChris added a commit to HeyImChris/react-native-macos that referenced this pull request Feb 4, 2021
* Update RCTCxxBridge.mm

* escape, enter support, align more tightly with win

* Update tests

* improve arrow js compatibility
HeyImChris added a commit that referenced this pull request Feb 4, 2021
* Update RCTCxxBridge.mm

* escape, enter support, align more tightly with win

* Update tests

* improve arrow js compatibility
HeyImChris added a commit that referenced this pull request Feb 4, 2021
* Add nullability checks (#704)

* Update RCTCxxBridge.mm

* add nullability checks

* macOS keyboard accessibility API alignment & support (#707)

* Update RCTCxxBridge.mm

* escape, enter support, align more tightly with win

* Update tests

* improve arrow js compatibility
acceptsKeyboardFocus={true}
enableFocusRing={true}
validKeysDown={['a', 'b', 'x', 'rightArrow']}
validKeysDown={['g', 'Esc', 'Enter', 'ArrowLeft']}
Copy link

Choose a reason for hiding this comment

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

Sorry, late to the PRty 😉 - in RNW this is represented with the keyUpEvents prop, which is an array of objects that do specify modifier keys as well. Also, it uses down "Escape", which is correct according to the standard. The Keyboard API doc actually incorrectly uses "Esc", but RNW is doing the right thing. cc @harinikmsft

@"ArrowLeft" : @(leftArrowKey),
@"ArrowRight" : @(rightArrowKey),
@"ArrowUp" : @(upArrowKey),
@"ArrowDown" : @(downArrowKey),
Copy link

Choose a reason for hiding this comment

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

These probably shouldn't be here anymore as the key property now correctly represents them.

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.

Keyboard event inconsistencies with react-native-windows

4 participants