fix: keyDownEvents stops propogation, default events for Pressable

packages/react-native/Libraries/Components/Pressable/Pressable.js

@@ -308,7 +308,6 @@ function Pressable(
     onKeyDown,
     onKeyUp,
     keyDownEvents,
-    keyUpEvents,
     acceptsFirstMouse,
     mouseDownCanMoveWindow,
     enableFocusRing,
@@ -356,9 +355,6 @@ function Pressable(
   const restPropsWithDefaults: React.ElementConfig<typeof View> = {
     ...restProps,
     ...android_rippleConfig?.viewProps,
-    acceptsFirstMouse: acceptsFirstMouse !== false && !disabled, // [macOS]
-    mouseDownCanMoveWindow: false, // [macOS]
-    enableFocusRing: enableFocusRing !== false && !disabled,
     accessible: accessible !== false,
     accessibilityViewIsModal:
       restProps['aria-modal'] ?? restProps.accessibilityViewIsModal,
@@ -368,6 +364,12 @@ function Pressable(
     focusable: focusable !== false && !disabled, // macOS]
     accessibilityValue,
     hitSlop,
+    // [macOS
+    acceptsFirstMouse: acceptsFirstMouse !== false && !disabled,
+    enableFocusRing: enableFocusRing !== false && !disabled,
+    keyDownEvents: keyDownEvents ?? [{key: ' '}, {key: 'Enter'}],
+    mouseDownCanMoveWindow: false,
+    // macOS]
   };
 
   const config = useMemo(

packages/react-native/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap

@@ -24,6 +24,16 @@ exports[`<Pressable /> should render as expected: should deep render when mocked
   collapsable={false}
   enableFocusRing={true}
   focusable={true}
+  keyDownEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
   mouseDownCanMoveWindow={false}
   onBlur={[Function]}
   onClick={[Function]}
@@ -63,6 +73,16 @@ exports[`<Pressable /> should render as expected: should deep render when not mo
   collapsable={false}
   enableFocusRing={true}
   focusable={true}
+  keyDownEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
   mouseDownCanMoveWindow={false}
   onBlur={[Function]}
   onClick={[Function]}
@@ -102,6 +122,16 @@ exports[`<Pressable disabled={true} /> should be disabled when disabled is true:
   collapsable={false}
   enableFocusRing={false}
   focusable={false}
+  keyDownEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
   mouseDownCanMoveWindow={false}
   onBlur={[Function]}
   onClick={[Function]}
@@ -141,6 +171,16 @@ exports[`<Pressable disabled={true} /> should be disabled when disabled is true:
   collapsable={false}
   enableFocusRing={false}
   focusable={false}
+  keyDownEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
   mouseDownCanMoveWindow={false}
   onBlur={[Function]}
   onClick={[Function]}
@@ -180,6 +220,16 @@ exports[`<Pressable disabled={true} accessibilityState={{}} /> should be disable
   collapsable={false}
   enableFocusRing={false}
   focusable={false}
+  keyDownEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
   mouseDownCanMoveWindow={false}
   onBlur={[Function]}
   onClick={[Function]}
@@ -219,6 +269,16 @@ exports[`<Pressable disabled={true} accessibilityState={{}} /> should be disable
   collapsable={false}
   enableFocusRing={false}
   focusable={false}
+  keyDownEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
   mouseDownCanMoveWindow={false}
   onBlur={[Function]}
   onClick={[Function]}
@@ -258,6 +318,16 @@ exports[`<Pressable disabled={true} accessibilityState={{checked: true}} /> shou
   collapsable={false}
   enableFocusRing={false}
   focusable={false}
+  keyDownEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
   mouseDownCanMoveWindow={false}
   onBlur={[Function]}
   onClick={[Function]}
@@ -297,6 +367,16 @@ exports[`<Pressable disabled={true} accessibilityState={{checked: true}} /> shou
   collapsable={false}
   enableFocusRing={false}
   focusable={false}
+  keyDownEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
   mouseDownCanMoveWindow={false}
   onBlur={[Function]}
   onClick={[Function]}
@@ -336,6 +416,16 @@ exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> sh
   collapsable={false}
   enableFocusRing={false}
   focusable={false}
+  keyDownEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
   mouseDownCanMoveWindow={false}
   onBlur={[Function]}
   onClick={[Function]}
@@ -375,6 +465,16 @@ exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> sh
   collapsable={false}
   enableFocusRing={false}
   focusable={false}
+  keyDownEvents={
+    Array [
+      Object {
+        "key": " ",
+      },
+      Object {
+        "key": "Enter",
+      },
+    ]
+  }
   mouseDownCanMoveWindow={false}
   onBlur={[Function]}
   onClick={[Function]}

packages/react-native/Libraries/Components/TextInput/TextInput.js

@@ -12,6 +12,8 @@ import type {HostInstance} from '../../../src/private/types/HostInstance';
 import type {____TextStyle_Internal as TextStyleInternal} from '../../StyleSheet/StyleSheetTypes';
 import type {
   GestureResponderEvent,
+  KeyEvent, // [macOS]
+  HandledKeyEvent, // [macOS]
   NativeSyntheticEvent,
   ScrollEvent,
 } from '../../Types/CoreEventTypes';
@@ -1134,6 +1136,34 @@ export type TextInputProps = $ReadOnly<{
    * unwanted edits without flicker.
    */
   value?: ?Stringish,
+
+  // [macOS
+  /**
+   * An array of key events that should be handled by the TextInput.
+   * When a key event matches one of these specifications, event propagation will be stopped.
+   * @platform macos
+   */
+  keyDownEvents?: ?$ReadOnlyArray<HandledKeyEvent>,
+
+  /**
+   * An array of key events that should be handled by the TextInput.
+   * When a key event matches one of these specifications, event propagation will be stopped.
+   * @platform macos
+   */
+  keyUpEvents?: ?$ReadOnlyArray<HandledKeyEvent>,
+
+  /**
+   * Callback that is called when a key is pressed down.
+   * @platform macos
+   */
+  onKeyDown?: ?(e: KeyEvent) => mixed,
+
+  /**
+   * Callback that is called when a key is released.
+   * @platform macos
+   */
+  onKeyUp?: ?(e: KeyEvent) => mixed,
+  // macOS]
 }>;
 
 type ViewCommands = $NonMaybeType<
@@ -1640,6 +1670,50 @@ function InternalTextInput(props: TextInputProps): React.Node {
     props.onScroll && props.onScroll(event);
   };
 
+  // [macOS
+  const _onKeyDown = (event: KeyEvent) => {
+    const keyDownEvents = props.keyDownEvents;
+    if (keyDownEvents != null && !event.isPropagationStopped()) {
+      const isHandled = keyDownEvents.some(
+        ({key, metaKey, ctrlKey, altKey, shiftKey}: HandledKeyEvent) => {
+          return (
+            event.nativeEvent.key === key &&
+            Boolean(metaKey) === event.nativeEvent.metaKey &&
+            Boolean(ctrlKey) === event.nativeEvent.ctrlKey &&
+            Boolean(altKey) === event.nativeEvent.altKey &&
+            Boolean(shiftKey) === event.nativeEvent.shiftKey
+          );
+        },
+      );
+      if (isHandled === true) {
+        event.stopPropagation();
+      }
+    }
+    props.onKeyDown?.(event);
+  };
+
+  const _onKeyUp = (event: KeyEvent) => {
+    const keyUpEvents = props.keyUpEvents;
+    if (keyUpEvents != null && !event.isPropagationStopped()) {
+      const isHandled = keyUpEvents.some(
+        ({key, metaKey, ctrlKey, altKey, shiftKey}: HandledKeyEvent) => {
+          return (
+            event.nativeEvent.key === key &&
+            Boolean(metaKey) === event.nativeEvent.metaKey &&
+            Boolean(ctrlKey) === event.nativeEvent.ctrlKey &&
+            Boolean(altKey) === event.nativeEvent.altKey &&
+            Boolean(shiftKey) === event.nativeEvent.shiftKey
+          );
+        },
+      );
+      if (isHandled === true) {
+        event.stopPropagation();
+      }
+    }
+    props.onKeyUp?.(event);
+  };
+  // macOS]
+
   let textInput = null;
 
   const multiline = props.multiline ?? false;
@@ -1795,8 +1869,9 @@ function InternalTextInput(props: TextInputProps): React.Node {
         onChange={_onChange}
         onContentSizeChange={props.onContentSizeChange}
         onFocus={_onFocus}
-        onKeyDown={props.onKeyDown} // [macOS]
-        onKeyUp={props.onKeyUp} // [macOS]
+        // $FlowFixMe[exponential-spread]
+        {...(otherProps.onKeyDown && {onKeyDown: _onKeyDown})} // [macOS]
+        {...(otherProps.onKeyUp && {onKeyUp: _onKeyUp})} // [macOS]
         onScroll={_onScroll}
         onSelectionChange={_onSelectionChange}
         onSelectionChangeShouldSetResponder={emptyFunctionThatReturnsTrue}

packages/react-native/Libraries/Components/View/View.js

@@ -13,6 +13,7 @@ import type {ViewProps} from './ViewPropTypes';
 import TextAncestor from '../../Text/TextAncestor';
 import ViewNativeComponent from './ViewNativeComponent';
 import * as React from 'react';
+import type {KeyEvent, HandledKeyEvent} from '../../Types/CoreEventTypes'; // [macOS]
 
 export type Props = ViewProps;
 
@@ -94,6 +95,50 @@ const View: component(
       };
     }
 
+    // [macOS
+    const _onKeyDown = (event: KeyEvent) => {
+      const keyDownEvents = otherProps.keyDownEvents;
+      if (keyDownEvents != null && !event.isPropagationStopped()) {
+        const isHandled = keyDownEvents.some(
+          ({key, metaKey, ctrlKey, altKey, shiftKey}: HandledKeyEvent) => {
+            return (
+              event.nativeEvent.key === key &&
+              Boolean(metaKey) === event.nativeEvent.metaKey &&
+              Boolean(ctrlKey) === event.nativeEvent.ctrlKey &&
+              Boolean(altKey) === event.nativeEvent.altKey &&
+              Boolean(shiftKey) === event.nativeEvent.shiftKey
+            );
+          },
+        );
+        if (isHandled === true) {
+          event.stopPropagation();
+        }
+      }
+      otherProps.onKeyDown?.(event);
+    };
+
+    const _onKeyUp = (event: KeyEvent) => {
+      const keyUpEvents = otherProps.keyUpEvents;
+      if (keyUpEvents != null && !event.isPropagationStopped()) {
+        const isHandled = keyUpEvents.some(
+          ({key, metaKey, ctrlKey, altKey, shiftKey}: HandledKeyEvent) => {
+            return (
+              event.nativeEvent.key === key &&
+              Boolean(metaKey) === event.nativeEvent.metaKey &&
+              Boolean(ctrlKey) === event.nativeEvent.ctrlKey &&
+              Boolean(altKey) === event.nativeEvent.altKey &&
+              Boolean(shiftKey) === event.nativeEvent.shiftKey
+            );
+          },
+        );
+        if (isHandled === true) {
+          event.stopPropagation();
+        }
+      }
+      otherProps.onKeyUp?.(event);
+    };
+    // macOS]
+
     const actualView = (
       <ViewNativeComponent
         {...otherProps}
@@ -112,6 +157,9 @@ const View: component(
             : importantForAccessibility
         }
         nativeID={id ?? nativeID}
+        // $FlowFixMe[exponential-spread]
+        {...(otherProps.onKeyDown && {onKeyDown: _onKeyDown})} // [macOS]
+        {...(otherProps.onKeyUp && {onKeyUp: _onKeyUp})} // [macOS]
         ref={forwardedRef}
       />
     );

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -3429,6 +3429,10 @@ export type TextInputProps = $ReadOnly<{
   submitBehavior?: ?SubmitBehavior,
   style?: ?TextStyleProp,
   value?: ?Stringish,
+  keyDownEvents?: ?$ReadOnlyArray<HandledKeyEvent>,
+  keyUpEvents?: ?$ReadOnlyArray<HandledKeyEvent>,
+  onKeyDown?: ?(e: KeyEvent) => mixed,
+  onKeyUp?: ?(e: KeyEvent) => mixed,
 }>;
 export type TextInputComponentStatics = $ReadOnly<{
   State: $ReadOnly<{