From c0abff11b66d9ec3a8e1d09333a3fb6c05678bed Mon Sep 17 00:00:00 2001
From: Luna Wei <luwe@meta.com>
Date: Thu, 16 Mar 2023 08:26:53 -0700
Subject: [PATCH] Precedent textContentType when set

Summary: Changelog: [iOS][Changed] - Give precedence to `textContentType` property for backwards compat as mentioned in https://github.com/facebook/react-native/issues/36229#issuecomment-1470468374

Reviewed By: necolas

Differential Revision: D44106291

fbshipit-source-id: 5702d7f171735d1abe6cfbc9ca1ad8f21751d51e
---
 Libraries/Components/TextInput/TextInput.js   | 17 ++++++---
 .../TextInput/__tests__/TextInput-test.js     | 36 +++++++++++++++++++
 .../TextInput/TextInputExample.ios.js         |  7 ++++
 3 files changed, 55 insertions(+), 5 deletions(-)

diff --git a/Libraries/Components/TextInput/TextInput.js b/Libraries/Components/TextInput/TextInput.js
index ec337de164ef8a..ef374f3c3fe256 100644
--- a/Libraries/Components/TextInput/TextInput.js
+++ b/Libraries/Components/TextInput/TextInput.js
@@ -354,6 +354,9 @@ type IOSProps = $ReadOnly<{|
   /**
    * Give the keyboard and the system information about the
    * expected semantic meaning for the content that users enter.
+   * `autoComplete` property accomplishes same behavior and is recommended as its supported by both platforms.
+   * Avoid using both `autoComplete` and `textContentType`, you can use `Platform.select` for differing platform behaviors.
+   * For backwards compatibility, when both set, `textContentType` takes precedence on iOS.
    * @platform ios
    */
   textContentType?: ?TextContentType,
@@ -1655,16 +1658,20 @@ const ExportedForwardRef: React.AbstractComponent<
       }
       autoComplete={
         Platform.OS === 'android'
-          ? // $FlowFixMe
+          ? // $FlowFixMe[invalid-computed-prop]
+            // $FlowFixMe[prop-missing]
             autoCompleteWebToAutoCompleteAndroidMap[autoComplete] ??
             autoComplete
           : undefined
       }
       textContentType={
-        Platform.OS === 'ios' &&
-        autoComplete &&
-        autoComplete in autoCompleteWebToTextContentTypeMap
-          ? // $FlowFixMe
+        textContentType != null
+          ? textContentType
+          : Platform.OS === 'ios' &&
+            autoComplete &&
+            autoComplete in autoCompleteWebToTextContentTypeMap
+          ? // $FlowFixMe[invalid-computed-prop]
+            // $FlowFixMe[prop-missing]
             autoCompleteWebToTextContentTypeMap[autoComplete]
           : textContentType
       }
diff --git a/Libraries/Components/TextInput/__tests__/TextInput-test.js b/Libraries/Components/TextInput/__tests__/TextInput-test.js
index a7900d00835b69..6e9fbc1fd64299 100644
--- a/Libraries/Components/TextInput/__tests__/TextInput-test.js
+++ b/Libraries/Components/TextInput/__tests__/TextInput-test.js
@@ -169,6 +169,42 @@ describe('TextInput tests', () => {
     expect(TextInput.State.currentlyFocusedInput()).toBe(textInputRe2.current);
   });
 
+  it('should give precedence to `textContentType` when set', () => {
+    const instance = ReactTestRenderer.create(
+      <TextInput autoComplete="tel" textContentType="emailAddress" />,
+    );
+
+    expect(instance.toJSON()).toMatchInlineSnapshot(`
+      <RCTSinglelineTextInputView
+        accessible={true}
+        allowFontScaling={true}
+        focusable={true}
+        forwardedRef={null}
+        mostRecentEventCount={0}
+        onBlur={[Function]}
+        onChange={[Function]}
+        onChangeSync={null}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onScroll={[Function]}
+        onSelectionChange={[Function]}
+        onSelectionChangeShouldSetResponder={[Function]}
+        onStartShouldSetResponder={[Function]}
+        rejectResponderTermination={true}
+        selection={null}
+        submitBehavior="blurAndSubmit"
+        text=""
+        textContentType="emailAddress"
+        underlineColorAndroid="transparent"
+      />
+    `);
+  });
+
   it('should render as expected', () => {
     expectRendersMatchingSnapshot(
       'TextInput',
diff --git a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js
index 94967c07849207..b0563e0d2f384d 100644
--- a/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js
+++ b/packages/rn-tester/js/examples/TextInput/TextInputExample.ios.js
@@ -822,6 +822,13 @@ exports.examples = ([
           <WithLabel label="name">
             <TextInput textContentType="name" style={styles.default} />
           </WithLabel>
+          <WithLabel label="postalCode, when autoComplete set">
+            <TextInput
+              textContentType="postalCode"
+              autoComplete="email"
+              style={styles.default}
+            />
+          </WithLabel>
         </View>
       );
     },