From d90253da36da7323d0c96468d6926f2adc0cff48 Mon Sep 17 00:00:00 2001
From: Paige Sun <paigesun@fb.com>
Date: Tue, 20 Apr 2021 12:48:59 -0700
Subject: [PATCH] iOS: Fix InputAccessoryView disappearing when
 inputAccessoryViewID exists

Summary:
InputAccessoryView disappears on Fabric (not Paper) when the text prop changes.

Changelog: [Fabric] [iOS] Fix InputAccessoryView disappearing when inputAccessoryViewID exists

Differential Revision: D27721549

fbshipit-source-id: 163dfcf0a8d5226453f4de356650a6ba82bee10b
---
 .../TextInput/RCTTextInputComponentView.mm    |   8 ++
 .../TextInput/TextInputExample.ios.js         | 101 +++++++++++++++++-
 2 files changed, 106 insertions(+), 3 deletions(-)

diff --git a/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm b/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm
index f5d280a59e9..e9e59a9235a 100644
--- a/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm
+++ b/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm
@@ -435,6 +435,14 @@ using namespace facebook::react;
 
 - (void)setDefaultInputAccessoryView
 {
+  // InputAccessoryView component sets the inputAccessoryView when inputAccessoryViewID exists
+  if (_backedTextInputView.inputAccessoryViewID) {
+    if (_backedTextInputView.isFirstResponder) {
+      [_backedTextInputView reloadInputViews];
+    }
+    return;
+  }
+
   UIKeyboardType keyboardType = _backedTextInputView.keyboardType;
 
   // These keyboard types (all are number pads) don't have a "Done" button by default,
diff --git a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js
index 218ad62d9f4..5a31407a030 100644
--- a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js
+++ b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js
@@ -23,6 +23,7 @@ const {
   Switch,
   Alert,
 } = require('react-native');
+import type {KeyboardType} from 'react-native/Libraries/Components/TextInput/TextInput';
 
 const TextInputSharedExamples = require('./TextInputSharedExamples.js');
 
@@ -41,7 +42,10 @@ class WithLabel extends React.Component<$FlowFixMeProps> {
   }
 }
 
-class TextInputAccessoryViewExample extends React.Component<{...}, *> {
+class TextInputAccessoryViewChangeTextExample extends React.Component<
+  {...},
+  *,
+> {
   constructor(props) {
     super(props);
     this.state = {text: 'Placeholder Text'};
@@ -51,6 +55,7 @@ class TextInputAccessoryViewExample extends React.Component<{...}, *> {
     const inputAccessoryViewID = 'inputAccessoryView1';
     return (
       <View>
+        <Text>Set InputAccessoryView with ID & reset text:</Text>
         <TextInput
           style={styles.default}
           inputAccessoryViewID={inputAccessoryViewID}
@@ -70,6 +75,69 @@ class TextInputAccessoryViewExample extends React.Component<{...}, *> {
   }
 }
 
+class TextInputAccessoryViewChangeKeyboardExample extends React.Component<
+  {...},
+  *,
+> {
+  constructor(props) {
+    super(props);
+    this.state = {text: '', keyboardType: 'default'};
+  }
+
+  _switchKeyboard = () => {
+    this.setState({
+      keyboardType:
+        this.state.keyboardType === 'default' ? 'number-pad' : 'default',
+    });
+  };
+
+  render() {
+    const inputAccessoryViewID = 'inputAccessoryView2';
+    return (
+      <View>
+        <Text>Set InputAccessoryView with ID & switch keyboard:</Text>
+        <TextInput
+          style={styles.default}
+          inputAccessoryViewID={inputAccessoryViewID}
+          onChangeText={text => this.setState({text})}
+          value={this.state.text}
+          keyboardType={this.state.keyboardType}
+          returnKeyType="done"
+        />
+        <InputAccessoryView nativeID={inputAccessoryViewID}>
+          <View style={{backgroundColor: 'white'}}>
+            <Button onPress={this._switchKeyboard} title="Switch Keyboard" />
+          </View>
+        </InputAccessoryView>
+      </View>
+    );
+  }
+}
+
+class TextInputAccessoryViewDefaultDoneButtonExample extends React.Component<
+  $ReadOnly<{|
+    keyboardType: KeyboardType,
+  |}>,
+  *,
+> {
+  constructor(props) {
+    super(props);
+    this.state = {text: ''};
+  }
+
+  render() {
+    return (
+      <TextInput
+        style={styles.default}
+        onChangeText={text => this.setState({text})}
+        value={this.state.text}
+        keyboardType={this.props.keyboardType}
+        returnKeyType="done"
+      />
+    );
+  }
+}
+
 class RewriteExampleKana extends React.Component<$FlowFixMeProps, any> {
   constructor(props) {
     super(props);
@@ -268,9 +336,36 @@ exports.examples = ([
     },
   },
   {
-    title: 'Keyboard Accessory View',
+    title: 'Keyboard Input Accessory View',
     render: function(): React.Node {
-      return <TextInputAccessoryViewExample />;
+      return (
+        <View>
+          <TextInputAccessoryViewChangeTextExample />
+          <TextInputAccessoryViewChangeKeyboardExample />
+        </View>
+      );
+    },
+  },
+  {
+    title: "Default Input Accessory View with returnKeyType = 'done'",
+    render: function(): React.Node {
+      const keyboardTypesWithDoneButton = [
+        'number-pad',
+        'phone-pad',
+        'decimal-pad',
+        'ascii-capable-number-pad',
+      ];
+      const examples = keyboardTypesWithDoneButton.map(type => {
+        return (
+          <WithLabel key={'keyboardType: ' + type} label={type}>
+            <TextInputAccessoryViewDefaultDoneButtonExample
+              key={type}
+              keyboardType={type}
+            />
+          </WithLabel>
+        );
+      });
+      return <View>{examples}</View>;
     },
   },
   {