Precedent textContentType when set

Summary: Changelog: [iOS][Changed] - Give precedence to `textContentType` property for backwards compat as mentioned in #36229 (comment) Reviewed By: necolas Differential Revision: D44106291 fbshipit-source-id: 5702d7f171735d1abe6cfbc9ca1ad8f21751d51e
facebook · Mar 16, 2023 · c0abff1 · c0abff1
1 parent dc2cbed
commit c0abff1
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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>
       );
     },