From c7364cc9b2eff81c386f77d624aae1dad9232a75 Mon Sep 17 00:00:00 2001
From: Saad Najmi <sanajmi@microsoft.com>
Date: Thu, 22 Aug 2024 00:01:06 -0700
Subject: [PATCH] more

---
 .../Libraries/Components/Button.js            |  16 --
 .../Components/Pressable/Pressable.js         |  20 --
 .../Libraries/Components/View/View.js         |  23 ++
 .../KeyboardEventsExample.js                  | 268 ++++++++++--------
 .../Lists/VirtualizedList.js                  |  23 +-
 5 files changed, 180 insertions(+), 170 deletions(-)

diff --git a/packages/react-native/Libraries/Components/Button.js b/packages/react-native/Libraries/Components/Button.js
index b2b1c1ee7fbb72..e3b729f2a47194 100644
--- a/packages/react-native/Libraries/Components/Button.js
+++ b/packages/react-native/Libraries/Components/Button.js
@@ -449,17 +449,6 @@ const Button: React.AbstractComponent<ButtonProps> = (props: ButtonProps) => {
       ? 'no-hide-descendants'
       : importantForAccessibility;
 
-  // [macOS
-  let _passthroughAllKeyEvents = passthroughAllKeyEvents;
-  let _validKeysDown = validKeysDown;
-  let _validKeysUp = validKeysUp;
-  if (keyDownEvents || keyUpEvents) {
-    _passThroughAllKeyboardEvents = true;
-    _validKeysDown = undefined;
-    _validKeysUp = undefined;
-  }
-  // macOS]
-
   return (
     <Touchable
       accessible={accessible}
@@ -486,11 +475,6 @@ const Button: React.AbstractComponent<ButtonProps> = (props: ButtonProps) => {
       onBlur={onBlur}
       onKeyDown={onKeyDown}
       onKeyUp={onKeyUp}
-      validKeysDown={_validKeysDown}
-      validKeysUp={_validKeysUp}
-      passthroughAllKeyEvents={_passthroughAllKeyEvents}
-      keyDownEvents={keyDownEvents}
-      keyUpEvents={keyUpEvents}
       tooltip={tooltip}
       // macOS]
       touchSoundDisabled={touchSoundDisabled}>
diff --git a/packages/react-native/Libraries/Components/Pressable/Pressable.js b/packages/react-native/Libraries/Components/Pressable/Pressable.js
index 7441abce97f9c2..f1347568bd4541 100644
--- a/packages/react-native/Libraries/Components/Pressable/Pressable.js
+++ b/packages/react-native/Libraries/Components/Pressable/Pressable.js
@@ -374,8 +374,6 @@ function Pressable(props: Props, forwardedRef): React.Node {
     onBlur,
     onKeyDown,
     onKeyUp,
-    validKeysDown,
-    validKeysUp,
     passthroughAllKeyEvents,
     keyDownEvents,
     keyUpEvents,
@@ -420,17 +418,6 @@ function Pressable(props: Props, forwardedRef): React.Node {
 
   const accessibilityLabel = ariaLabel ?? props.accessibilityLabel;
 
-  // [macOS
-  let _passthroughAllKeyEvents = passthroughAllKeyEvents;
-  let _validKeysDown = validKeysDown;
-  let _validKeysUp = validKeysUp;
-  if (keyDownEvents || keyUpEvents) {
-    _passThroughAllKeyboardEvents = true;
-    _validKeysDown = undefined;
-    _validKeysUp = undefined;
-  }
-  // macOS]
-
   const restPropsWithDefaults: React.ElementConfig<typeof View> = {
     ...restProps,
     ...android_rippleConfig?.viewProps,
@@ -444,13 +431,6 @@ function Pressable(props: Props, forwardedRef): React.Node {
     accessibilityLabel,
     accessibilityState: _accessibilityState,
     focusable: focusable !== false && !disabled, // macOS]
-    // [macOS
-    validKeysDown: _validKeysDown,
-    validKeysUp: _validKeysUp,
-    passthroughAllKeyEvents: _passthroughAllKeyEvents,
-    keyDownEvents,
-    keyUpEvents,
-    // macOS]
     accessibilityValue,
     hitSlop,
   };
diff --git a/packages/react-native/Libraries/Components/View/View.js b/packages/react-native/Libraries/Components/View/View.js
index c4d2fc63ada85f..a4f4a6487ae1ff 100644
--- a/packages/react-native/Libraries/Components/View/View.js
+++ b/packages/react-native/Libraries/Components/View/View.js
@@ -55,6 +55,13 @@ const View: React.AbstractComponent<
       nativeID,
       pointerEvents,
       tabIndex,
+      // [macOS
+      passthroughAllKeyEvents,
+      validKeysDown,
+      validKeysUp,
+      keyDownEvents,
+      keyUpEvents,
+      // macOS]
       ...otherProps
     }: ViewProps,
     forwardedRef,
@@ -102,6 +109,17 @@ const View: React.AbstractComponent<
     // $FlowFixMe[sketchy-null-mixed]
     const newPointerEvents = style?.pointerEvents || pointerEvents;
 
+    // [macOS
+    let _passthroughAllKeyEvents = passthroughAllKeyEvents;
+    let _validKeysDown = validKeysDown;
+    let _validKeysUp = validKeysUp;
+    if (keyDownEvents || keyUpEvents) {
+      _passthroughAllKeyEvents = true;
+      _validKeysDown = keyDownEvents;
+      _validKeysUp = keyUpEvents;
+    }
+    // macOS]
+
     const actualView = (
       <ViewNativeComponent
         {...otherProps}
@@ -123,6 +141,11 @@ const View: React.AbstractComponent<
         style={style}
         // $FlowFixMe[incompatible-type]
         pointerEvents={newPointerEvents}
+        // [macOS
+        passthroughAllKeyEvents={_passthroughAllKeyEvents}
+        validKeysDown={_validKeysDown}
+        validKeysUp={_validKeysUp}
+        // macOS]
         ref={forwardedRef}
       />
     );
diff --git a/packages/rn-tester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js b/packages/rn-tester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js
index 2268d1dcf0e591..8720d93f17387d 100644
--- a/packages/rn-tester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js
+++ b/packages/rn-tester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js
@@ -15,16 +15,8 @@ import type {KeyEvent} from 'react-native/Libraries/Types/CoreEventTypes';
 const React = require('react');
 const ReactNative = require('react-native');
 
-const {
-  Button,
-  Platform,
-  ScrollView,
-  StyleSheet,
-  Switch,
-  Text,
-  TextInput,
-  View,
-} = ReactNative;
+const {Button, ScrollView, StyleSheet, Switch, Text, TextInput, View} =
+  ReactNative;
 
 const switchStyle = {
   alignItems: 'center',
@@ -91,13 +83,58 @@ function KeyEventExample(): React.Node {
 
   const [passthroughAllKeyEvents, setPassthroughAllKeyEvents] =
     React.useState(false);
-  const toggleSwitch = React.useCallback(
+  const togglePassthroughAllKeyEvents = React.useCallback(
     (value: boolean) => {
       setPassthroughAllKeyEvents(value);
     },
     [setPassthroughAllKeyEvents],
   );
 
+  const [useKeyDownOrUpEvents, setUseKeyDownOrUpEvents] = React.useState(false);
+  const toggleKeyDownOrUpEvents = React.useCallback(
+    (value: boolean) => {
+      setUseKeyDownOrUpEvents(value);
+    },
+    [setUseKeyDownOrUpEvents],
+  );
+
+  const viewRef = React.useRef(null);
+
+  const ViewText = useKeyDownOrUpEvents
+    ? "keyDownEvents: [{key: 'g'}, {key: 'Escape'}, {key: 'Enter'}, {key: 'ArrowLeft'}] \nkeyUpEvents: [{key: 'c'}, {key: 'd'}]"
+    : "validKeysDown: [g, Escape, Enter, ArrowLeft] \nvalidKeysUp: [c, d]";
+  const viewKeyboardProps = useKeyDownOrUpEvents
+    ? {
+        keyDownEvents: [
+          {key: 'g'},
+          {key: 'Escape'},
+          {key: 'Enter'},
+          {key: 'ArrowLeft'},
+        ],
+        keyUpEvents: [{key: 'c'}, {key: 'd'}],
+      }
+    : {
+        validKeysDown: ['g', 'Escape', 'Enter', 'ArrowLeft'],
+        validKeysUp: ['c ', 'd'],
+      };
+
+  const TextInputText = useKeyDownOrUpEvents
+    ? "keyDownEvents: [{key: 'ArrowRight'}, {key: 'ArrowDown'}, {key: 'Enter', ctrlKey: true}, \nkeyUpEvents: [{key: 'Escape'}, {key: 'Enter'}]"
+    : "validKeysDown: ['ArrowRight', 'ArrowDown', 'Enter'] \nvalidKeysUp: ['Escape ', {key: 'Enter', ctrlKey: true}]";
+  const textInputKeyboardProps = useKeyDownOrUpEvents
+    ? {
+        keyDownEvents: [
+          {key: 'ArrowRight'},
+          {key: 'ArrowDown'},
+          {key: 'Enter', ctrlKey: true},
+        ],
+        keyUpEvents: [{key: 'Escape'}, {key: 'Enter'}],
+      }
+    : {
+        validKeysDown: ['ArrowRight', 'ArrowDown', 'Enter'],
+        validKeysUp: ['Escape ', {key: 'Enter', ctrlKey: true}],
+      };
+
   return (
     <ScrollView>
       <View style={{padding: 10}}>
@@ -107,120 +144,113 @@ function KeyEventExample(): React.Node {
           Shortcuts > Use keyboard navigation to move focus between controls.
         </Text>
         <View>
-          {Platform.OS === 'macos' ? (
+          <View style={switchStyle}>
+            <Text style={styles.title}>View</Text>
+            <Switch value={showView} onValueChange={toggleShowView} />
+          </View>
+          {showView && (
             <>
-              <View style={switchStyle}>
-                <Text style={styles.title}>View</Text>
-                <Switch value={showView} onValueChange={toggleShowView} />
-              </View>
-              {showView ? (
-                <>
-                  <Text style={styles.text}>
-                    validKeysDown: [g, Escape, Enter, ArrowLeft]{'\n'}
-                    validKeysUp: [c, d]
-                  </Text>
-                  <View
-                    focusable={true}
-                    style={styles.row}
-                    passthroughAllKeyEvents={passthroughAllKeyEvents}
-                    validKeysDown={['g', 'Escape', 'Enter', 'ArrowLeft']}
-                    onKeyDown={handleKeyDown}
-                    validKeysUp={['c', 'd']}
-                    onKeyUp={handleKeyUp}
-                  />
-                </>
-              ) : null}
-              <View style={switchStyle}>
-                <Text style={styles.title}>TextInput</Text>
-                <Switch
-                  value={showTextInput}
-                  onValueChange={toggleShowTextInput}
-                />
-              </View>
-              {showTextInput ? (
-                <>
-                  <Text style={styles.text}>
-                    validKeysDown: [ArrowRight, ArrowDown, Ctrl+Enter]{'\n'}
-                    validKeysUp: [Escape, Enter]
-                  </Text>
-                  <TextInput
-                    blurOnSubmit={false}
-                    placeholder={'Singleline textInput'}
-                    multiline={false}
-                    focusable={true}
-                    style={styles.row}
-                    passthroughAllKeyEvents={passthroughAllKeyEvents}
-                    validKeysDown={[
-                      'ArrowRight',
-                      'ArrowDown',
-                      {key: 'Enter', ctrlKey: true},
-                    ]}
-                    onKeyDown={handleKeyDown}
-                    validKeysUp={['Escape', 'Enter']}
-                    onKeyUp={handleKeyUp}
-                  />
-                  <TextInput
-                    placeholder={'Multiline textInput'}
-                    multiline={true}
-                    focusable={true}
-                    style={styles.row}
-                    passthroughAllKeyEvents={passthroughAllKeyEvents}
-                    validKeysDown={[
-                      'ArrowRight',
-                      'ArrowDown',
-                      {key: 'Enter', ctrlKey: true},
-                    ]}
-                    onKeyDown={handleKeyDown}
-                    validKeysUp={['Escape', 'Enter']}
-                    onKeyUp={handleKeyUp}
-                  />
-                </>
-              ) : null}
-              <View style={switchStyle}>
-                <Text style={styles.title}>TextInput with no handled keys</Text>
-                <Switch
-                  value={showTextInput2}
-                  onValueChange={toggleShowTextInput2}
-                />
-              </View>
-              {showTextInput2 ? (
-                <>
-                  <Text style={styles.text}>
-                    validKeysDown: []{'\n'}
-                    validKeysUp: []
-                  </Text>
-                  <TextInput
-                    blurOnSubmit={false}
-                    placeholder={'Singleline textInput'}
-                    multiline={false}
-                    focusable={true}
-                    style={styles.row}
-                    passthroughAllKeyEvents={passthroughAllKeyEvents}
-                    validKeysDown={[]}
-                    onKeyDown={handleKeyDown}
-                    validKeysUp={[]}
-                    onKeyUp={handleKeyUp}
-                  />
-                  <TextInput
-                    placeholder={'Multiline textInput'}
-                    multiline={true}
-                    focusable={true}
-                    style={styles.row}
-                    passthroughAllKeyEvents={passthroughAllKeyEvents}
-                    validKeysDown={[]}
-                    onKeyDown={handleKeyDown}
-                    validKeysUp={[]}
-                    onKeyUp={handleKeyUp}
-                  />
-                </>
-              ) : null}
+              <Text style={styles.text}>{ViewText}</Text>
+              <View
+                focusable={true}
+                style={styles.row}
+                ref={viewRef}
+                onPress={_e => {
+                  console.log('View onPress');
+                  viewRef.current.focus();
+                }}
+                onKeyDown={handleKeyDown}
+                onKeyUp={handleKeyUp}
+                passthroughAllKeyEvents={passthroughAllKeyEvents}
+                {...viewKeyboardProps}
+              />
             </>
-          ) : null}
+          )}
+          <View style={switchStyle}>
+            <Text style={styles.title}>TextInput</Text>
+            <Switch value={showTextInput} onValueChange={toggleShowTextInput} />
+          </View>
+          {showTextInput && (
+            <>
+              <Text style={styles.text}>{TextInputText}</Text>
+              <TextInput
+                blurOnSubmit={false}
+                placeholder={'Singleline textInput'}
+                multiline={false}
+                focusable={true}
+                style={styles.row}
+                onKeyDown={handleKeyDown}
+                onKeyUp={handleKeyUp}
+                passthroughAllKeyEvents={passthroughAllKeyEvents}
+                {...textInputKeyboardProps}
+              />
+              <TextInput
+                placeholder={'Multiline textInput'}
+                multiline={true}
+                focusable={true}
+                style={styles.row}
+                passthroughAllKeyEvents={passthroughAllKeyEvents}
+                validKeysDown={[
+                  'ArrowRight',
+                  'ArrowDown',
+                  {key: 'Enter', ctrlKey: true},
+                ]}
+                onKeyDown={handleKeyDown}
+                validKeysUp={['Escape', 'Enter']}
+                onKeyUp={handleKeyUp}
+              />
+            </>
+          )}
+          <View style={switchStyle}>
+            <Text style={styles.title}>TextInput with no handled keys</Text>
+            <Switch
+              value={showTextInput2}
+              onValueChange={toggleShowTextInput2}
+            />
+          </View>
+          {showTextInput2 && (
+            <>
+              <Text style={styles.text}>
+                validKeysDown: []{'\n'}
+                validKeysUp: []
+              </Text>
+              <TextInput
+                blurOnSubmit={false}
+                placeholder={'Singleline textInput'}
+                multiline={false}
+                focusable={true}
+                style={styles.row}
+                passthroughAllKeyEvents={passthroughAllKeyEvents}
+                validKeysDown={[]}
+                onKeyDown={handleKeyDown}
+                validKeysUp={[]}
+                onKeyUp={handleKeyUp}
+              />
+              <TextInput
+                placeholder={'Multiline textInput'}
+                multiline={true}
+                focusable={true}
+                style={styles.row}
+                passthroughAllKeyEvents={passthroughAllKeyEvents}
+                validKeysDown={[]}
+                onKeyDown={handleKeyDown}
+                validKeysUp={[]}
+                onKeyUp={handleKeyUp}
+              />
+            </>
+          )}
           <View style={switchStyle}>
             <Text>{'Pass through all key events'}</Text>
             <Switch
               value={passthroughAllKeyEvents}
-              onValueChange={toggleSwitch}
+              onValueChange={togglePassthroughAllKeyEvents}
+            />
+          </View>
+          <View style={switchStyle}>
+            <Text>{'Use keyDownEvents / keyUpEvents'}</Text>
+            <Switch
+              value={useKeyDownOrUpEvents}
+              onValueChange={toggleKeyDownOrUpEvents}
             />
           </View>
           <Button
diff --git a/packages/virtualized-lists/Lists/VirtualizedList.js b/packages/virtualized-lists/Lists/VirtualizedList.js
index 07d572f68cf0a7..0f9301ea228776 100644
--- a/packages/virtualized-lists/Lists/VirtualizedList.js
+++ b/packages/virtualized-lists/Lists/VirtualizedList.js
@@ -1286,27 +1286,20 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
       this.props.onPreferredScrollerStyleDidChange;
     const invertedDidChange = this.props.onInvertedDidChange;
 
-    const isFirstRowSelected =
-      this.state.selectedRowIndex === this.state.cellsAroundViewport.first;
-    const isLastRowSelected =
-      this.state.selectedRowIndex === this.state.cellsAroundViewport.last;
-
-    // Don't pass in ArrowUp/ArrowDown at the top/bottom of the list so that keyboard event can bubble
-    let _validKeysDown = ['Home', 'End'];
-    if (!isFirstRowSelected) {
-      _validKeysDown.push('ArrowUp');
-    }
-    if (!isLastRowSelected) {
-      _validKeysDown.push('ArrowDown');
-    }
+    let keyDownEvents = [
+      {key: 'ArrowUp'},
+      {key: 'ArrowDown'},
+      {key: 'Home'},
+      {key: 'End'},
+    ];
 
     const keyboardNavigationProps = {
       focusable: true,
-      validKeysDown: _validKeysDown,
+      keyDownEvents: keyDownEvents,
       onKeyDown: this._handleKeyDown,
     };
-
     // macOS]
+
     const onRefresh = props.onRefresh;
     if (this._isNestedWithSameOrientation()) {
       // Prevent VirtualizedList._onContentSizeChange from being triggered by a bubbling onContentSizeChange event.