Return and Space keys do not trigger onPress events (microsoft#1623) (m…

…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]>
shwanton · Feb 7, 2023 · d96c73c · d96c73c
1 parent afaf958
commit d96c73c
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 0 deletions.
diff --git a/Libraries/Pressability/Pressability.js b/Libraries/Pressability/Pressability.js
@@ -628,12 +628,35 @@ export default class Pressability {
         if (onKeyDown != null) {
           onKeyDown(event);
         }
+        // Pressables on macOS should respond to the enter/return and spacebar keys.
+        // The keyDown event triggers a press event as well as the pressIn effect mimicking a native control behavior.
+        if (
+          (event.nativeEvent.key === 'Enter' ||
+            event.nativeEvent.key === ' ') &&
+          event.defaultPrevented !== true
+        ) {
+          const {onPress, onPressIn} = this._config;
+          // $FlowFixMe: PressEvents don't mesh with keyboarding APIs. Keep legacy behavior of passing KeyEvents instead
+          onPressIn && onPressIn(event);
+          // $FlowFixMe: PressEvents don't mesh with keyboarding APIs. Keep legacy behavior of passing KeyEvents instead
+          onPress && onPress(event);
+        }
       },
       onKeyUp: (event: KeyEvent): void => {
         const {onKeyUp} = this._config;
         if (onKeyUp != null) {
           onKeyUp(event);
         }
+        // The keyUp event triggers the pressOut effect.
+        if (
+          (event.nativeEvent.key === 'Enter' ||
+            event.nativeEvent.key === ' ') &&
+          event.defaultPrevented !== true
+        ) {
+          const {onPressOut} = this._config;
+          // $FlowFixMe: PressEvents don't mesh with keyboarding APIs. Keep legacy behavior of passing KeyEvents instead
+          onPressOut && onPressOut(event);
+        }
       },
     };
     // ]TODO(macOS GH#774)

diff --git a/React/Views/RCTView.m b/React/Views/RCTView.m
@@ -1695,6 +1695,12 @@ - (RCTViewKeyboardEvent*)keyboardEvent:(NSEvent*)event {
   NSArray<NSString *> *validKeys = keyDown ? self.validKeysDown : self.validKeysUp;
   NSString *key = [RCTViewKeyboardEvent keyFromEvent:event];
 
+  // If the view is focusable and the component didn't explicity set the validKeysDown or Up,
+  // allow enter/return and spacebar key events to mimic the behavior of native controls.
+  if (self.focusable && validKeys == nil) {
+    validKeys = @[@"Enter", @" "];
+  }
+
   // Only post events for keys we care about
   if (![validKeys containsObject:key]) {
     return nil;