Skip to content

Commit

Permalink
Precedent textContentType when set
Browse files Browse the repository at this point in the history
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
  • Loading branch information
lunaleaps authored and facebook-github-bot committed Mar 16, 2023
1 parent dc2cbed commit c0abff1
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 5 deletions.
17 changes: 12 additions & 5 deletions Libraries/Components/TextInput/TextInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
}
Expand Down
36 changes: 36 additions & 0 deletions Libraries/Components/TextInput/__tests__/TextInput-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
},
Expand Down

0 comments on commit c0abff1

Please sign in to comment.