Fix handling of keyDown/keyUp events by TextInput

appden · christophpurrer · commit 65bd3ffb7ceb · 2022-08-11T13:26:45.000-07: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.
diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
@@ -1333,6 +1333,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
@@ -514,6 +514,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
@@ -42,6 +42,7 @@ 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.
 
 - (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
@@ -6,6 +6,7 @@
  */
 
 #import <React/RCTBackedTextInputDelegateAdapter.h>
+#import <React/RCTBaseTextInputView.h> // TODO(macOS GH#774)
 #import "RCTBackedTextInputViewProtocol.h" // TODO(OSS Candidate ISS#2710739)
 #import "RCTBackedTextInputDelegate.h" // TODO(OSS Candidate ISS#2710739)
 #import "../RCTTextUIKit.h" // TODO(macOS GH#774)
@@ -188,6 +189,9 @@ - (BOOL)control:(NSControl *)control textShouldEndEditing:(NSText *)fieldEditor
 - (BOOL)control:(NSControl *)control textView:(NSTextView *)fieldEditor doCommandBySelector:(SEL)commandSelector
 {
   id<RCTBackedTextInputDelegate> textInputDelegate = [_backedTextInputView textInputDelegate];
+  RCTBaseTextInputView* textInputView = (RCTBaseTextInputView*)_backedTextInputView.superview;
+  BOOL hasValidKeys = textInputView && (textInputView.validKeysUp.count || textInputView.validKeysDown.count);
+  
   BOOL commandHandled = NO;
   // enter/return
   if (commandSelector == @selector(insertNewline:) || commandSelector == @selector(insertNewlineIgnoringFieldEditor:)) {
@@ -217,9 +221,11 @@ - (BOOL)control:(NSControl *)control textView:(NSTextView *)fieldEditor doComman
     //escape
   } else if (commandSelector == @selector(cancelOperation:)) {
     [textInputDelegate textInputDidCancel];
-    [[_backedTextInputView window] makeFirstResponder:nil];
+    if (!hasValidKeys) {
+      [_backedTextInputView.window makeFirstResponder:nil];
+    }
     commandHandled = YES;
-}
+  }
 
   return commandHandled;
 }
@@ -406,6 +412,9 @@ - (BOOL)textView:(NSTextView *)textView doCommandBySelector:(SEL)commandSelector
 {
   BOOL commandHandled = NO;
   id<RCTBackedTextInputDelegate> textInputDelegate = [_backedTextInputView textInputDelegate];
+  RCTBaseTextInputView* textInputView = (RCTBaseTextInputView*)_backedTextInputView.superview.superview.superview;
+  BOOL hasValidKeys = textInputView && (textInputView.validKeysUp.count || textInputView.validKeysDown.count);
+    
   // enter/return
   if ((commandSelector == @selector(insertNewline:) || commandSelector == @selector(insertNewlineIgnoringFieldEditor:))) {
     if (textInputDelegate.textInputShouldReturn) {
@@ -421,9 +430,10 @@ - (BOOL)textView:(NSTextView *)textView doCommandBySelector:(SEL)commandSelector
     //escape
   } else if (commandSelector == @selector(cancelOperation:)) {
     [textInputDelegate textInputDidCancel];
-    [_backedTextInputView.window makeFirstResponder:nil];
+    if (!hasValidKeys) {
+      [_backedTextInputView.window makeFirstResponder:nil];
+    }
     commandHandled = YES;
-    
   }
 
   return commandHandled;
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)
 {
@@ -597,6 +596,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
@@ -482,6 +482,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)
@@ -563,6 +574,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,7 +13,7 @@
 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';
 
@@ -47,24 +47,44 @@ class KeyEventExample extends React.Component<{}, State> {
 
   render() {
     return (
-      <View>
-        <Text>Key events are called when a component detects a key press.</Text>
+      <View style={{padding: 10}}>
+        <Text>
+          Key events are called when a component detects a key press. To tab
+          between views: Enable System Preferences / Keyboard / Shortcuts > Use
+          keyboard navigation to move focus between controls.
+        </Text>
         <View>
           {Platform.OS === 'macos' ? (
-            <View
-              focusable={true}
-              validKeysDown={['g', 'Tab', 'Escape', 'Enter', 'ArrowLeft']}
-              onKeyDown={this.onKeyDownEvent}
-              validKeysUp={['c', 'd']}
-              onKeyUp={this.onKeyUpEvent}>
-              <Button
-                title={'Test button'}
+            <>
+              <View
+                focusable={true}
+                style={styles.row}
+                validKeysDown={['g', 'Escape', 'Enter', 'ArrowLeft']}
                 onKeyDown={this.onKeyDownEvent}
-                validKeysUp={['j', 'k', 'l']}
+                validKeysUp={['c', 'd']}
+                onKeyUp={this.onKeyUpEvent}></View>
+              <TextInput
+                blurOnSubmit={false}
+                placeholder={'Singleline textInput'}
+                multiline={false}
+                focusable={true}
+                style={styles.row}
+                validKeysDown={['ArrowRight', 'ArrowDown']}
+                onKeyDown={this.onKeyDownEvent}
+                validKeysUp={['Escape', 'Enter']}
+                onKeyUp={this.onKeyUpEvent}
+              />
+              <TextInput
+                placeholder={'Multiline textInput'}
+                multiline={true}
+                focusable={true}
+                style={styles.row}
+                validKeysDown={['ArrowLeft', 'ArrowUp']}
+                onKeyDown={this.onKeyDownEvent}
+                validKeysUp={['Escape', 'Enter']}
                 onKeyUp={this.onKeyUpEvent}
-                onPress={() => {}}
               />
-            </View>
+            </>
           ) : null}
           <Text>{'Events: ' + this.state.eventStream + '\n\n'}</Text>
         </View>
@@ -74,21 +94,12 @@ class KeyEventExample extends React.Component<{}, State> {
 }
 
 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: 40,
+    marginTop: 10,
+    marginBottom: 10,
+    backgroundColor: 'grey',
+    padding: 10,
   },
 });
 

Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge`
`32`	`32`	`{`
`33`	`33`	`RCTAssertParam(bridge);`
`34`	`34`
`35`		`- if (self = [super initWithFrame:CGRectZero]) {`
	`35`	`+ if (self = [super initWithEventDispatcher:bridge.eventDispatcher]) { // TODO(OSS Candidate GH#774)`
`36`	`36`	`_bridge = bridge;`
`37`	`37`	`_eventDispatcher = bridge.eventDispatcher;`
`38`	`38`	`}`
`@@ -42,7 +42,6 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge`
`42`	`42`
`43`	`43`	`RCT_NOT_IMPLEMENTED(- (instancetype)init)`
`44`	`44`	`RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:(NSCoder *)decoder)`
`45`		`-RCT_NOT_IMPLEMENTED(- (instancetype)initWithFrame:(CGRect)frame)`
`46`	`45`
`47`	`46`	`- (RCTUIView<RCTBackedTextInputViewProtocol> *)backedTextInputView // TODO(macOS ISS#3536887)`
`48`	`47`	`{`
`@@ -597,6 +596,10 @@ - (void)textInputDidCancel {`
`597`	`596`	`eventCount:_nativeEventCount];`
`598`	`597`	`[self textInputDidEndEditing];`
`599`	`598`	`}`
	`599`	`+`
	`600`	`+- (BOOL)textInputShouldHandleKeyEvent:(NSEvent *)event {`
	`601`	`+ return ![self handleKeyboardEvent:event];`
	`602`	`+}`
`600`	`603`	`#endif // ]TODO(macOS GH#774)`
`601`	`604`
`602`	`605`	`- (void)updateLocalData`