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
|
* Give the keyboard and the system information about the
|
||||||
* expected semantic meaning for the content that users enter.
|
* 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
|
* @platform ios
|
||||||
*/
|
*/
|
||||||
textContentType?: ?TextContentType,
|
textContentType?: ?TextContentType,
|
||||||
|
@ -1655,16 +1658,20 @@ const ExportedForwardRef: React.AbstractComponent<
|
||||||
}
|
}
|
||||||
autoComplete={
|
autoComplete={
|
||||||
Platform.OS === 'android'
|
Platform.OS === 'android'
|
||||||
? // $FlowFixMe
|
? // $FlowFixMe[invalid-computed-prop]
|
||||||
|
// $FlowFixMe[prop-missing]
|
||||||
autoCompleteWebToAutoCompleteAndroidMap[autoComplete] ??
|
autoCompleteWebToAutoCompleteAndroidMap[autoComplete] ??
|
||||||
autoComplete
|
autoComplete
|
||||||
: undefined
|
: undefined
|
||||||
}
|
}
|
||||||
textContentType={
|
textContentType={
|
||||||
Platform.OS === 'ios' &&
|
textContentType != null
|
||||||
|
? textContentType
|
||||||
|
: Platform.OS === 'ios' &&
|
||||||
autoComplete &&
|
autoComplete &&
|
||||||
autoComplete in autoCompleteWebToTextContentTypeMap
|
autoComplete in autoCompleteWebToTextContentTypeMap
|
||||||
? // $FlowFixMe
|
? // $FlowFixMe[invalid-computed-prop]
|
||||||
|
// $FlowFixMe[prop-missing]
|
||||||
autoCompleteWebToTextContentTypeMap[autoComplete]
|
autoCompleteWebToTextContentTypeMap[autoComplete]
|
||||||
: textContentType
|
: textContentType
|
||||||
}
|
}
|
||||||
|
|
|
@ -169,6 +169,42 @@ describe('TextInput tests', () => {
|
||||||
expect(TextInput.State.currentlyFocusedInput()).toBe(textInputRe2.current);
|
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', () => {
|
it('should render as expected', () => {
|
||||||
expectRendersMatchingSnapshot(
|
expectRendersMatchingSnapshot(
|
||||||
'TextInput',
|
'TextInput',
|
||||||
|
|
|
@ -822,6 +822,13 @@ exports.examples = ([
|
||||||
<WithLabel label="name">
|
<WithLabel label="name">
|
||||||
<TextInput textContentType="name" style={styles.default} />
|
<TextInput textContentType="name" style={styles.default} />
|
||||||
</WithLabel>
|
</WithLabel>
|
||||||
|
<WithLabel label="postalCode, when autoComplete set">
|
||||||
|
<TextInput
|
||||||
|
textContentType="postalCode"
|
||||||
|
autoComplete="email"
|
||||||
|
style={styles.default}
|
||||||
|
/>
|
||||||
|
</WithLabel>
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
Загрузка…
Ссылка в новой задаче