feat: Manage keyboard shortcuts visibility of TextInput

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

@@ -161,6 +161,7 @@ const RCTTextInputViewConfig = {
       onChangeSync: true,
       onKeyPressSync: true,
     }),
+    disableKeyboardShortcuts: true,
   },
 };
 

packages/react-native/Libraries/Components/TextInput/TextInput.d.ts

@@ -136,6 +136,14 @@ export interface DocumentSelectionState extends EventEmitter {
  * @see https://reactnative.dev/docs/textinput#props
  */
 export interface TextInputIOSProps {
+  disableKeyboardShortcuts?: boolean | undefined;
+
+  /**
+   * If `true`, disabled the native keyboard shortcuts.
+   * @platform ios
+   */
+  disableKeyboardShortcuts?: boolean | undefined;
+
   /**
    * enum('never', 'while-editing', 'unless-editing', 'always')
    * When the clear button should appear on the right side of the text view

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

@@ -216,6 +216,14 @@ export type enterKeyHintType =
 type PasswordRules = string;
 
 type IOSProps = $ReadOnly<{|
+  disableKeyboardShortcuts?: ?boolean,
+
+  /**
+   * If `true`, disabled the native keyboard shortcuts.
+   * @platform ios
+   */
+  disableKeyboardShortcuts?: ?boolean,
+
   /**
    * When the clear button should appear on the right side of the text view.
    * This property is supported only for single-line TextInput component.

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

@@ -260,6 +260,14 @@ export type enterKeyHintType =
 type PasswordRules = string;
 
 type IOSProps = $ReadOnly<{|
+  disableKeyboardShortcuts?: ?boolean,
+
+  /**
+   * If `true`, disabled the native keyboard shortcuts.
+   * @platform ios
+   */
+  disableKeyboardShortcuts?: ?boolean,
+
   /**
    * When the clear button should appear on the right side of the text view.
    * This property is supported only for single-line TextInput component.
@@ -1284,6 +1292,7 @@ function InternalTextInput(props: Props): React.Node {
     selectionColor,
     selectionHandleColor,
     cursorColor,
+    disableKeyboardShortcuts,
     ...otherProps
   } = props;
 
@@ -1591,12 +1600,16 @@ function InternalTextInput(props: Props): React.Node {
           flattenedStyle.paddingVertical == null &&
           flattenedStyle.paddingTop == null));
 
+    console.debug('[dev] disableKeyboardShortcuts 2', disableKeyboardShortcuts);
+    console.debug('[dev] props.multiline', props.multiline);
+
     textInput = (
       <RCTTextInputView
         // $FlowFixMe[incompatible-type] - Figure out imperative + forward refs.
         ref={ref}
         {...otherProps}
         {...eventHandlers}
+        disableKeyboardShortcuts={disableKeyboardShortcuts}
         accessibilityState={_accessibilityState}
         accessible={accessible}
         submitBehavior={submitBehavior}
@@ -1807,10 +1820,14 @@ const ExportedForwardRef: component(
     inputMode,
     showSoftInputOnFocus,
     keyboardType,
+    disableKeyboardShortcuts,
     ...restProps
   },
   forwardedRef: ReactRefSetter<TextInputInstance>,
 ) {
+  console.debug('[dev] restProps', restProps);
+  console.debug('[dev] disableKeyboardShortcuts', disableKeyboardShortcuts);
+
   return (
     <InternalTextInput
       allowFontScaling={allowFontScaling}
@@ -1845,6 +1862,7 @@ const ExportedForwardRef: component(
               autoCompleteWebToTextContentTypeMap[autoComplete]
             : textContentType
       }
+      disableKeyboardShortcuts={disableKeyboardShortcuts}
       {...restProps}
       forwardedRef={forwardedRef}
     />

packages/react-native/Libraries/Text/TextInput/RCTBackedTextInputViewProtocol.h

@@ -16,6 +16,7 @@ NS_ASSUME_NONNULL_BEGIN
 
 @property (nonatomic, copy, nullable) NSAttributedString *attributedText;
 @property (nonatomic, copy, nullable) NSString *placeholder;
+@property (nonatomic, assign) BOOL disableKeyboardShortcuts;
 @property (nonatomic, strong, nullable) UIColor *placeholderColor;
 @property (nonatomic, assign, readonly) BOOL textWasPasted;
 @property (nonatomic, assign, readonly) BOOL dictationRecognizing;
@@ -51,6 +52,8 @@ NS_ASSUME_NONNULL_BEGIN
 // Use `attributedText.string` instead.
 @property (nonatomic, copy, nullable) NSString *text NS_UNAVAILABLE;
 
+@property (nonatomic, readonly) UITextInputAssistantItem *inputAssistantItem;
+
 @end
 
 NS_ASSUME_NONNULL_END

packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.h

@@ -51,6 +51,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, copy) NSString *inputAccessoryViewID;
 @property (nonatomic, assign) UIKeyboardType keyboardType;
 @property (nonatomic, assign) BOOL showSoftInputOnFocus;
+@property (nonatomic, assign) BOOL disableKeyboardShortcuts;
 
 /**
  Sets selection intext input if both start and end are within range of the text input.

packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm

@@ -350,12 +350,14 @@ - (void)setPasswordRules:(NSString *)descriptor
 
 - (UIKeyboardType)keyboardType
 {
+  NSLog(@"setKeyboardType called with value: %ld", self.backedTextInputView.keyboardType);
   return self.backedTextInputView.keyboardType;
 }
 
 - (void)setKeyboardType:(UIKeyboardType)keyboardType
 {
   UIView<RCTBackedTextInputViewProtocol> *textInputView = self.backedTextInputView;
+  NSLog(@"setKeyboardType called with value: %ld", keyboardType);
   if (textInputView.keyboardType != keyboardType) {
     textInputView.keyboardType = keyboardType;
     // Without the call to reloadInputViews, the keyboard will not change until the textview field (the first responder)
@@ -637,6 +639,18 @@ - (void)didMoveToWindow
     [self.backedTextInputView reactFocusIfNeeded];
   }
 
+  NSLog(@"backedTextInputView: %@", self.backedTextInputView);
+
+  // Apply keyboard shortcuts setting when view becomes active
+    if (_disableKeyboardShortcuts && self.backedTextInputView.isFirstResponder) {
+        UITextInputAssistantItem *inputAssistantItem = self.backedTextInputView.inputAssistantItem;
+        if (inputAssistantItem) {
+            inputAssistantItem.leadingBarButtonGroups = @[];
+            inputAssistantItem.trailingBarButtonGroups = @[];
+        }
+        [self.backedTextInputView reloadInputViews];
+    }
+
   _didMoveToWindow = YES;
 }
 
@@ -801,4 +815,22 @@ static BOOL findMismatch(NSString *first, NSString *second, NSRange *firstRange,
   return YES;
 }
 
+- (void)setDisableKeyboardShortcuts:(BOOL)disableKeyboardShortcuts {
+    _disableKeyboardShortcuts = disableKeyboardShortcuts;
+    NSLog(@"setDisableKeyboardShortcuts called with value: %d", disableKeyboardShortcuts);
+
+    id<RCTBackedTextInputViewProtocol> backedTextInputView = self.backedTextInputView;
+    NSLog(@"backedTextInputView: %@", backedTextInputView);
+
+
+        if (disableKeyboardShortcuts) {
+            UITextInputAssistantItem *inputAssistantItem = backedTextInputView.inputAssistantItem;
+            if (inputAssistantItem) {
+                inputAssistantItem.leadingBarButtonGroups = @[];
+                inputAssistantItem.trailingBarButtonGroups = @[];
+            }
+        }
+
+}
+
 @end

packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputViewManager.mm

@@ -32,6 +32,27 @@ @implementation RCTBaseTextInputViewManager {
 
 #pragma mark - Unified <TextInput> properties
 
+// Map the JS property to the custom setter method
+RCT_EXPORT_VIEW_PROPERTY(disableKeyboardShortcuts, BOOL)
+
+//// Custom setter method
+//- (void)setDisableKeyboardShortcuts:(BOOL)disable forView:(UIView *)view
+//{
+//  // Log the call to this method
+//  NSLog(@"setDisableKeyboardShortcuts called with value: %d", disable);
+//  
+//  view.inputAssistantItem.leadingBarButtonGroups = @[];
+//  view.inputAssistantItem.trailingBarButtonGroups = @[];
+//  
+////  if ([view respondsToSelector:@selector(inputAssistantItem)]) {
+////    UITextInputAssistantItem *inputAssistantItem = [view inputAssistantItem];
+////    if (disable) {
+////      inputAssistantItem.leadingBarButtonGroups = @[];
+////      inputAssistantItem.trailingBarButtonGroups = @[];
+////    }
+////  }
+//}
+
 RCT_REMAP_VIEW_PROPERTY(autoCapitalize, backedTextInputView.autocapitalizationType, UITextAutocapitalizationType)
 RCT_REMAP_VIEW_PROPERTY(autoCorrect, backedTextInputView.autocorrectionType, UITextAutocorrectionType)
 RCT_REMAP_VIEW_PROPERTY(contextMenuHidden, backedTextInputView.contextMenuHidden, BOOL)
@@ -68,6 +89,8 @@ @implementation RCTBaseTextInputViewManager {
 
 RCT_EXPORT_VIEW_PROPERTY(mostRecentEventCount, NSInteger)
 
+RCT_EXPORT_VIEW_PROPERTY(disableKeyboardShortcuts, BOOL)
+
 RCT_EXPORT_SHADOW_PROPERTY(text, NSString)
 RCT_EXPORT_SHADOW_PROPERTY(placeholder, NSString)
 RCT_EXPORT_SHADOW_PROPERTY(onContentSizeChange, RCTDirectEventBlock)

packages/react-native/Libraries/Text/TextInput/Singleline/RCTUITextField.h

@@ -33,6 +33,7 @@ NS_ASSUME_NONNULL_BEGIN
 @property (nonatomic, assign, readonly) CGFloat zoomScale;
 @property (nonatomic, assign, readonly) CGPoint contentOffset;
 @property (nonatomic, assign, readonly) UIEdgeInsets contentInset;
+@property (nonatomic, assign) BOOL disableKeyboardShortcuts;
 
 @end
 

packages/react-native/Libraries/Text/TextInput/Singleline/RCTUITextField.mm

@@ -57,10 +57,31 @@ - (void)setTextContainerInset:(UIEdgeInsets)textContainerInset
 
 - (void)setPlaceholder:(NSString *)placeholder
 {
+  NSLog(@"setPlaceholder called with value: %@", placeholder);
+
   [super setPlaceholder:placeholder];
   [self _updatePlaceholder];
 }
 
+- (BOOL)disableKeyboardShortcuts
+{
+  // Log the call to this method
+  NSLog(@"setDisableKeyboardShortcuts called with value: %d", self.disableKeyboardShortcuts);
+
+  return self.disableKeyboardShortcuts;
+}
+
+- (void)setDisableKeyboardShortcuts:(BOOL)disableKeyboardShortcuts
+{
+    // Log the call to this method
+  NSLog(@"setDisableKeyboardShortcuts called with value: %d", disableKeyboardShortcuts);
+
+  if (disableKeyboardShortcuts) {
+    self.inputAssistantItem.leadingBarButtonGroups = @[];
+    self.inputAssistantItem.trailingBarButtonGroups = @[];
+  }
+}
+
 - (void)setPlaceholderColor:(UIColor *)placeholderColor
 {
   _placeholderColor = placeholderColor;

packages/react-native/ReactCommon/react/renderer/components/textinput/BaseTextInputProps.cpp

@@ -126,6 +126,12 @@ BaseTextInputProps::BaseTextInputProps(
           rawProps,
           "multiline",
           sourceProps.multiline,
+          {false})),
+      disableKeyboardShortcuts(convertRawProp(
+          context,
+          rawProps,
+          "disableKeyboardShortcuts",
+          sourceProps.disableKeyboardShortcuts,
           {false})) {}
 
 void BaseTextInputProps::setProp(
@@ -208,6 +214,7 @@ void BaseTextInputProps::setProp(
     RAW_SET_PROP_SWITCH_CASE_BASIC(readOnly);
     RAW_SET_PROP_SWITCH_CASE_BASIC(submitBehavior);
     RAW_SET_PROP_SWITCH_CASE_BASIC(multiline);
+    RAW_SET_PROP_SWITCH_CASE_BASIC(disableKeyboardShortcuts);
   }
 }
 

packages/react-native/ReactCommon/react/renderer/components/textinput/BaseTextInputProps.h

@@ -71,6 +71,7 @@ class BaseTextInputProps : public ViewProps, public BaseTextProps {
   SubmitBehavior submitBehavior{SubmitBehavior::Default};
 
   bool multiline{false};
+  bool disableKeyboardShortcuts{};
 
   SubmitBehavior getNonDefaultSubmitBehavior() const;
 };

packages/rn-tester/Podfile

@@ -35,7 +35,7 @@ end
 def pods(target_name, options = {})
   project 'RNTesterPods.xcodeproj'
 
-  fabric_enabled = true
+  fabric_enabled = false
 
   # Hermes is now enabled by default.
   # The following line will only disable Hermes if the USE_HERMES envvar is SET to a value other than 1 (e.g. USE_HERMES=0).