Fix handling of keyDown/keyUp events by TextInput (microsoft#1345)

christophpurrer · appden · Saadnajmi · Shawn Dempsey · commit 4aac0a25ac69 · 2023-02-14T15:39:02.000-08:00
This extends the ability to intercept `keyDown` and `keyUp` events to `TextInput`.
We need this for the ability to insert newlines when holding shift in chat, along with support arrow up/down from the search input.

Co-authored-by: Scott Kyle &lt;skyle@fb.com&gt;
Co-authored-by: Saad Najmi &lt;sanajmi@microsoft.com&gt;
diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
@@ -1286,6 +1286,8 @@ function InternalTextInput(props: Props): React.Node {
         onChangeSync={useOnChangeSync === true ? _onChangeSync : null}
         onContentSizeChange={props.onContentSizeChange}
         onFocus={_onFocus}
+        onKeyDown={props.onKeyDown} // TODO(macOS GH#774)
+        onKeyUp={props.onKeyUp} // TODO(macOS GH#774)
         onScroll={_onScroll}
         onSelectionChange={_onSelectionChange}
         onSelectionChangeShouldSetResponder={emptyFunctionThatReturnsTrue}
diff --git a/Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap b/Libraries/Components/TextInput/__tests__/__snapshots__/TextInput-test.js.snap
@@ -13,8 +13,6 @@ exports[`TextInput tests should render as expected: should deep render when mock
   onChangeSync={null}
   onClick={[Function]}
   onFocus={[Function]}
-  onKeyDown={[Function]}
-  onKeyUp={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
@@ -44,8 +42,6 @@ exports[`TextInput tests should render as expected: should deep render when not
   onChangeSync={null}
   onClick={[Function]}
   onFocus={[Function]}
-  onKeyDown={[Function]}
-  onKeyUp={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
diff --git a/Libraries/Text/TextInput/Multiline/RCTUITextView.m b/Libraries/Text/TextInput/Multiline/RCTUITextView.m
@@ -473,6 +473,19 @@ - (void)deleteBackward {
     [super deleteBackward];
   }
 }
+#else
+- (void)keyDown:(NSEvent *)event {
+  // If hasMarkedText is true then an IME is open, so don't send event to JS.
+  if (self.hasMarkedText || [self.textInputDelegate textInputShouldHandleKeyEvent:event]) {
+    [super keyDown:event];
+  }
+}
+
+- (void)keyUp:(NSEvent *)event {
+  if ([self.textInputDelegate textInputShouldHandleKeyEvent:event]) {
+    [super keyUp:event];
+  }
+}
 #endif // ]TODO(OSS Candidate ISS#2710739)
 
 - (void)_updatePlaceholder
diff --git a/Libraries/Text/TextInput/RCTBackedTextInputDelegate.h b/Libraries/Text/TextInput/RCTBackedTextInputDelegate.h
@@ -36,7 +36,8 @@ NS_ASSUME_NONNULL_BEGIN
 - (BOOL)textInputShouldHandleDeleteBackward:(id<RCTBackedTextInputViewProtocol>)sender; // Return `YES` to have the deleteBackward event handled normally. Return `NO` to disallow it and handle it yourself. TODO(OSS Candidate ISS#2710739)
 #if TARGET_OS_OSX // [TODO(macOS GH#774)
 - (BOOL)textInputShouldHandleDeleteForward:(id<RCTBackedTextInputViewProtocol>)sender; // Return `YES` to have the deleteForward event handled normally. Return `NO` to disallow it and handle it yourself.
-
+- (BOOL)textInputShouldHandleKeyEvent:(NSEvent *)event; // Return `YES` to have the key event handled normally. Return `NO` to disallow it and handle it yourself.
+- (BOOL)hasValidKeyDownOrValidKeyUp:(NSString *)key;
 - (void)textInputDidCancel;  // Handle `Escape` key press.
 #endif // ]TODO(macOS GH#774)
 
diff --git a/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.m b/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.m
@@ -217,7 +217,9 @@ - (BOOL)control:(NSControl *)control textView:(NSTextView *)fieldEditor doComman
     //escape
   } else if (commandSelector == @selector(cancelOperation:)) {
     [textInputDelegate textInputDidCancel];
-    [[_backedTextInputView window] makeFirstResponder:nil];
+    if (![textInputDelegate hasValidKeyDownOrValidKeyUp:@"Escape"]) {
+      [[_backedTextInputView window] makeFirstResponder:nil];
+    }
     commandHandled = YES;
 }
 
@@ -420,7 +422,9 @@ - (BOOL)textView:(NSTextView *)textView doCommandBySelector:(SEL)commandSelector
     //escape
   } else if (commandSelector == @selector(cancelOperation:)) {
     [textInputDelegate textInputDidCancel];
-    [_backedTextInputView.window makeFirstResponder:nil];
+    if (![textInputDelegate hasValidKeyDownOrValidKeyUp:@"Escape"]) {
+      [[_backedTextInputView window] makeFirstResponder:nil];
+    }
     commandHandled = YES;
     
   }
diff --git a/Libraries/Text/TextInput/RCTBaseTextInputView.m b/Libraries/Text/TextInput/RCTBaseTextInputView.m
@@ -32,7 +32,7 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge
 {
   RCTAssertParam(bridge);
 
-  if (self = [super initWithFrame:CGRectZero]) {
+  if (self = [super initWithEventDispatcher:bridge.eventDispatcher]) { // TODO(OSS Candidate GH#774)
     _bridge = bridge;
     _eventDispatcher = bridge.eventDispatcher;
   }
@@ -42,7 +42,6 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge
 
 RCT_NOT_IMPLEMENTED(- (instancetype)init)
 RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)decoder)
-RCT_NOT_IMPLEMENTED(- (instancetype)initWithFrame:(CGRect)frame)
 
 - (RCTUIView<RCTBackedTextInputViewProtocol> *)backedTextInputView // TODO(macOS ISS#3536887)
 {
@@ -562,6 +561,10 @@ - (BOOL)textInputShouldHandleDeleteForward:(__unused id)sender {
   return YES;
 }
 
+- (BOOL)hasValidKeyDownOrValidKeyUp:(NSString *)key {
+  return [self.validKeysDown containsObject:key] || [self.validKeysUp containsObject:key];
+}
+
 - (void)textInputDidCancel {
   [_eventDispatcher sendTextEventWithType:RCTTextEventTypeKeyPress
                                  reactTag:self.reactTag
@@ -570,6 +573,10 @@ - (void)textInputDidCancel {
                                eventCount:_nativeEventCount];
   [self textInputDidEndEditing];
 }
+
+- (BOOL)textInputShouldHandleKeyEvent:(NSEvent *)event {
+  return ![self handleKeyboardEvent:event];
+}
 #endif // ]TODO(macOS GH#774)
 
 - (void)updateLocalData
diff --git a/Libraries/Text/TextInput/Singleline/RCTUITextField.m b/Libraries/Text/TextInput/Singleline/RCTUITextField.m
@@ -475,6 +475,17 @@ - (BOOL)becomeFirstResponder
   }
   return isFirstResponder;
 }
+
+- (BOOL)performKeyEquivalent:(NSEvent *)event
+{
+  // The currentEditor is NSText for historical reasons, but documented to be NSTextView.
+  NSTextView *currentEditor = (NSTextView *)self.currentEditor;
+  // The currentEditor is non-nil when focused and hasMarkedText means an IME is open.
+  if (currentEditor && !currentEditor.hasMarkedText && ![self.textInputDelegate textInputShouldHandleKeyEvent:event]) {
+    return YES; // Don't send currentEditor the keydown event.
+  }
+  return [super performKeyEquivalent:event];
+}
 #endif // ]TODO(macOS GH#774)
 	
 #if !TARGET_OS_OSX // TODO(macOS GH#774)
@@ -556,6 +567,12 @@ - (void)deleteBackward {
     [super deleteBackward];
   }
 }
+#else
+- (void)keyUp:(NSEvent *)event {
+  if ([self.textInputDelegate textInputShouldHandleKeyEvent:event]) {
+    [super keyUp:event];
+  }
+}
 #endif // ]TODO(OSS Candidate ISS#2710739)
 
 @end
diff --git a/packages/rn-tester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js b/packages/rn-tester/js/examples/KeyboardEventsExample/KeyboardEventsExample.js
@@ -13,82 +13,108 @@
 const React = require('react');
 const ReactNative = require('react-native');
 import {Platform} from 'react-native';
-const {Button, PlatformColor, StyleSheet, Text, View} = ReactNative;
+const {Button, PlatformColor, StyleSheet, Text, TextInput, View} = ReactNative;
 
 import type {KeyEvent} from 'react-native/Libraries/Types/CoreEventTypes';
 
-type State = {
-  eventStream: string,
-  characters: string,
-};
-
-class KeyEventExample extends React.Component<{}, State> {
-  state: State = {
-    eventStream: '',
-    characters: '',
-  };
-
-  onKeyDownEvent: (e: KeyEvent) => void = (e: KeyEvent) => {
-    console.log('received view key down event\n', e.nativeEvent.key);
-    this.setState({characters: e.nativeEvent.key});
-    this.setState(prevState => ({
-      eventStream:
-        prevState.eventStream + '\nKey Down: ' + prevState.characters,
-    }));
+function KeyEventExample(): React.Node {
+  const [log, setLog] = React.useState([]);
+  const appendLog = (line: string) => {
+    const limit = 12;
+    let newLog = log.slice(0, limit - 1);
+    newLog.unshift(line);
+    setLog(newLog);
   };
 
-  onKeyUpEvent: (e: KeyEvent) => void = (e: KeyEvent) => {
-    console.log('received key up event\n', e.nativeEvent.key);
-    this.setState({characters: e.nativeEvent.key});
-    this.setState(prevState => ({
-      eventStream: prevState.eventStream + '\nKey Up: ' + prevState.characters,
-    }));
-  };
-
-  render() {
-    return (
+  return (
+    <View style={{padding: 10}}>
+      <Text>
+        Key events are called when a component detects a key press.To tab
+        between views on macOS: Enable System Preferences / Keyboard / Shortcuts
+        > Use keyboard navigation to move focus between controls.
+      </Text>
       <View>
-        <Text>Key events are called when a component detects a key press.</Text>
-        <View>
-          {Platform.OS === 'macos' ? (
+        {Platform.OS === 'macos' ? (
+          <>
+            <Text style={styles.title}>View</Text>
+            <Text style={styles.text}>
+              validKeysDown: [g, Escape, Enter, ArrowLeft]{'\n'}
+              validKeysUp: [c, d]
+            </Text>
             <View
               focusable={true}
-              validKeysDown={['g', 'Tab', 'Escape', 'Enter', 'ArrowLeft']}
-              onKeyDown={this.onKeyDownEvent}
+              style={styles.row}
+              validKeysDown={['g', 'Escape', 'Enter', 'ArrowLeft']}
+              onKeyDown={e => appendLog('Key Down:' + e.nativeEvent.key)}
               validKeysUp={['c', 'd']}
-              onKeyUp={this.onKeyUpEvent}>
-              <Button
-                title={'Test button'}
-                onKeyDown={this.onKeyDownEvent}
-                validKeysUp={['j', 'k', 'l']}
-                onKeyUp={this.onKeyUpEvent}
-                onPress={() => {}}
-              />
-            </View>
-          ) : null}
-          <Text>{'Events: ' + this.state.eventStream + '\n\n'}</Text>
-        </View>
+              onKeyUp={e => appendLog('Key Up:' + e.nativeEvent.key)}></View>
+            <Text style={styles.title}>TextInput</Text>
+            <Text style={styles.text}>
+              validKeysDown: [ArrowRight, ArrowDown]{'\n'}
+              validKeysUp: [Escape, Enter]
+            </Text>
+            <TextInput
+              blurOnSubmit={false}
+              placeholder={'Singleline textInput'}
+              multiline={false}
+              focusable={true}
+              style={styles.row}
+              validKeysDown={['ArrowRight', 'ArrowDown']}
+              onKeyDown={e => appendLog('Key Down:' + e.nativeEvent.key)}
+              validKeysUp={['Escape', 'Enter']}
+              onKeyUp={e => appendLog('Key Up:' + e.nativeEvent.key)}
+            />
+            <TextInput
+              placeholder={'Multiline textInput'}
+              multiline={true}
+              focusable={true}
+              style={styles.row}
+              validKeysDown={['ArrowRight', 'ArrowDown']}
+              onKeyDown={e => appendLog('Key Down:' + e.nativeEvent.key)}
+              validKeysUp={['Escape', 'Enter']}
+              onKeyUp={e => appendLog('Key Up:' + e.nativeEvent.key)}
+            />
+            <Text style={styles.text}>
+              validKeysDown: []{'\n'}
+              validKeysUp: []
+            </Text>
+            <TextInput
+              blurOnSubmit={false}
+              placeholder={'Singleline textInput'}
+              multiline={false}
+              focusable={true}
+              style={styles.row}
+            />
+            <TextInput
+              placeholder={'Multiline textInput'}
+              multiline={true}
+              focusable={true}
+              style={styles.row}
+            />
+          </>
+        ) : null}
+        <Text>{'Events:\n' + log.join('\n')}</Text>
       </View>
-    );
-  }
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({
-  textInput: {
-    ...Platform.select({
-      macos: {
-        color: PlatformColor('textColor'),
-        backgroundColor: PlatformColor('textBackgroundColor'),
-        borderColor: PlatformColor('gridColor'),
-      },
-      default: {
-        borderColor: '#0f0f0f',
-      },
-    }),
-    borderWidth: StyleSheet.hairlineWidth,
-    flex: 1,
-    fontSize: 13,
-    padding: 4,
+  row: {
+    height: 36,
+    marginTop: 8,
+    marginBottom: 8,
+    backgroundColor: 'grey',
+    padding: 10,
+  },
+  title: {
+    fontSize: 14,
+    paddingTop: 12,
+    paddingBottom: 8,
+  },
+  text: {
+    fontSize: 12,
+    paddingBottom: 4,
   },
 });
 
