add callbacks to textinput

microsoft · Jul 1, 2021 · 017845e · 017845e
1 parent 03542f1
commit 017845e
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 7 deletions.
diff --git a/packages/@react-native-windows/tester/src/js/examples/Pressable/PressableExample.windows.js b/packages/@react-native-windows/tester/src/js/examples/Pressable/PressableExample.windows.js
@@ -646,7 +646,7 @@ exports.examples = [
     description: ('You can intercept routed KeyDown/KeyUp events by specifying the onKeyDownCapture/onKeyUpCapture callbacks.' +
       " In the example below, a <Pressable> is wrapper in a <View>, and each specifies onKeyDown and onKeyDownCapture callbacks. Set focus to the 'Press me' element by tabbing into it, and start pressing letters on the keyboard to observe the event log below." +
       " Additionally, because the keyDownEvents prop is specified - keyDownEvents={[{code: 'KeyW', handledEventPhase: 3}, {code: 'KeyE', handledEventPhase: 1}]} - " +
-      'for these keys the event routing will be interrupted at the phase specified (3 - bubbling, 1 - capturing) to match processing on the native side.': string),
+      'for these keys the event routing will be interrupted (by a call to event.stopPropagation()) at the phase specified (3 - bubbling, 1 - capturing) to match processing on the native side.': string),
     render: function(): React.Node {
       return <PressWithKeyCapture />;
     },

diff --git a/packages/@react-native-windows/tester/src/js/examples/TextInput/TextInputExample.windows.js b/packages/@react-native-windows/tester/src/js/examples/TextInput/TextInputExample.windows.js
@@ -18,8 +18,9 @@ const {
   View,
   StyleSheet,
   Slider,
-  Switch,
+  Switch
 } = require('react-native');
+const {useState} = React;
 
 const TextInputSharedExamples = require('./TextInputSharedExamples');
 
@@ -156,6 +157,49 @@ class PressInOutEvents extends React.Component<
   }
 }
 
+function PropagationSample() {
+  const [eventLog, setEventLog] = useState([]);
+
+  function logEvent(eventName) {
+    const limit = 6;
+    setEventLog(current => {
+      return [eventName].concat(current.slice(0, limit - 1));
+    });
+    console.log(eventName);
+  }
+  return (
+    <>
+      <View focusable
+        style={styles.row} 
+        // keyDownEvents={[
+        //   {code: 'KeyW', handledEventPhase: 3},
+        //   {code: 'KeyE', handledEventPhase: 1},
+        // ]}
+        onKeyDown={event => logEvent('outer keyDown ' + event.nativeEvent.code)}
+        onKeyDownCapture={event =>
+          logEvent('outer keyDownCapture ' + event.nativeEvent.code)
+        }>
+        <Text>some text to focus on</Text>
+        <TextInput
+          placeholder="Click inside the box to observe events being fired."
+          style={[styles.singleLineWithHeightTextInput]}
+          onKeyDown={event => logEvent('textinput keyDown ' + event.nativeEvent.code)}
+          onKeyUp={event => logEvent('textinput keyUp ' + event.nativeEvent.code)}
+          keyDownEvents={[
+            {code: 'KeyW', handledEventPhase: 3},
+            {code: 'KeyE', handledEventPhase: 1},
+          ]}
+        />
+      </View>
+      <View style={styles.eventLogBox}>
+        {eventLog.map((e, ii) => (
+          <Text key={ii}>{e}</Text>
+        ))}
+      </View>
+    </>
+  );
+}
+
 const styles = StyleSheet.create({
   multiline: {
     height: 60,
@@ -487,5 +531,11 @@ exports.examples = ([
       );
     },
   },
+  {
+    title: 'Stop propagation sample',
+    render: function(): React.Node {
+      return <PropagationSample/>; 
+    },
+  },
   // Windows]
 ]: Array<RNTesterExampleModuleItem>);
diff --git a/packages/@react-native/tester/js/examples/TextInput/TextInputSharedExamples.js b/packages/@react-native/tester/js/examples/TextInput/TextInputSharedExamples.js
@@ -470,7 +470,6 @@ module.exports = ([
         <TextInput
           autoFocus={true}
           style={styles.default}
-          keyDownEvents={[{code: 'KeyC'}, {code: 'KeyD', handledEventPhase: 1}]}
           accessibilityLabel="I am the accessibility label for text input"
         />
       );

diff --git a/vnext/src/Libraries/Components/TextInput/TextInput.windows.js b/vnext/src/Libraries/Components/TextInput/TextInput.windows.js
@@ -1142,6 +1142,50 @@ function InternalTextInput(props: Props): React.Node {
   // TextInput handles onBlur and onFocus events
   // so omitting onBlur and onFocus pressability handlers here.
   const {onBlur, onFocus, ...eventHandlers} = usePressability(config) || {};
+  const eventPhase = Object.freeze({Capturing:1, Bubbling:3});
+  const _keyDown = (event: KeyEvent) => {
+    if (props.keyDownEvents && event.isPropagationStopped() !== true) {
+      for (const el of props.keyDownEvents) {
+        if (event.nativeEvent.code == el.code && el.handledEventPhase == eventPhase.Bubbling) {
+          event.stopPropagation();
+        }
+      }
+    }
+    props.onKeyDown && props.onKeyDown(event);
+  };
+
+  const _keyUp = (event: KeyEvent) => {
+    if (props.keyUpEvents && event.isPropagationStopped() !== true) {
+      for (const el of props.keyUpEvents) {
+        if (event.nativeEvent.code == el.code && el.handledEventPhase == 3) {
+          event.stopPropagation();
+        }
+      }
+    }
+    props.onKeyUp && props.onKeyUp(event);
+  };
+
+  const _keyDownCapture = (event: KeyEvent) => {
+    if (props.keyDownEvents && event.isPropagationStopped() !== true) {
+      for (const el of props.keyDownEvents) {
+        if (event.nativeEvent.code == el.code && el.handledEventPhase == 1) {
+          event.stopPropagation();
+        }
+      }
+    }
+    props.onKeyDownCapture && props.onKeyDownCapture(event);
+  };
+
+  const _keyUpCapture = (event: KeyEvent) => {
+    if (props.keyUpEvents && event.isPropagationStopped() !== true) {
+      for (const el of props.keyUpEvents) {
+        if (event.nativeEvent.code == el.code && el.handledEventPhase == 1) {
+          event.stopPropagation();
+        }
+      }
+    }
+    props.onKeyUpCapture && props.onKeyUpCapture(event);
+  };
 
   if (Platform.OS === 'ios') {
     const RCTTextInputView =
@@ -1245,6 +1289,10 @@ function InternalTextInput(props: Props): React.Node {
         onSelectionChangeShouldSetResponder={emptyFunctionThatReturnsTrue}
         selection={selection}
         text={text}
+        onKeyDown={_keyDown}
+        onKeyDownCapture={_keyDownCapture}
+        onKeyUp={_keyUp}
+        onKeyUpCapture={_keyUpCapture}
       />
     );
   } // Windows]

diff --git a/vnext/src/Libraries/Components/View/View.windows.js b/vnext/src/Libraries/Components/View/View.windows.js
@@ -32,7 +32,7 @@ const View: React.AbstractComponent<
   React.ElementRef<typeof ViewNativeComponent>,
 > = React.forwardRef((props: ViewProps, forwardedRef) => {
   const _keyDown = (event: KeyEvent) => {
-    if (props.keyDownEvents && !event.isPropagationStopped) {
+    if (props.keyDownEvents && event.isPropagationStopped() !== true) {
       for (const el of props.keyDownEvents) {
         if (event.nativeEvent.code == el.code && el.handledEventPhase == 3) {
           event.stopPropagation();
@@ -43,7 +43,7 @@ const View: React.AbstractComponent<
   };
 
   const _keyUp = (event: KeyEvent) => {
-    if (props.keyUpEvents && !event.isPropagationStopped) {
+    if (props.keyUpEvents && event.isPropagationStopped() !== true) {
       for (const el of props.keyUpEvents) {
         if (event.nativeEvent.code == el.code && el.handledEventPhase == 3) {
           event.stopPropagation();
@@ -54,7 +54,7 @@ const View: React.AbstractComponent<
   };
 
   const _keyDownCapture = (event: KeyEvent) => {
-    if (props.keyDownEvents && !event.isPropagationStopped) {
+    if (props.keyDownEvents && event.isPropagationStopped() !== true) {
       for (const el of props.keyDownEvents) {
         if (event.nativeEvent.code == el.code && el.handledEventPhase == 1) {
           event.stopPropagation();
@@ -65,7 +65,7 @@ const View: React.AbstractComponent<
   };
 
   const _keyUpCapture = (event: KeyEvent) => {
-    if (props.keyUpEvents && !event.isPropagationStopped) {
+    if (props.keyUpEvents && event.isPropagationStopped() !== true) {
       for (const el of props.keyUpEvents) {
         if (event.nativeEvent.code == el.code && el.handledEventPhase == 1) {
           event.stopPropagation();