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
This commit is contained in:
Родитель
dc2cbed07c
Коммит
c0abff11b6
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
},
|
||||
|
|
Загрузка…
Ссылка в новой задаче