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

* 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]>
Saadnajmi · Jan 12, 2023 · ceac270 · ceac270
1 parent 80a2aee
commit ceac270
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
@@ -1632,6 +1632,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;