mirror of
https://github.com/zoriya/react-native-web.git
synced 2026-05-29 09:02:03 +00:00
[fix] TextInput autoComplete behavior
Fix 'autoComplete' behavior now that Chrome has fixed broken behavior for 'off'. Add fallback support for React Native's 'autoCompleteType' prop. Close #1404
This commit is contained in:
@@ -25,7 +25,12 @@ describe('components/TextInput', () => {
|
|||||||
|
|
||||||
test('value "off"', () => {
|
test('value "off"', () => {
|
||||||
const input = findNativeInput(shallow(<TextInput autoComplete="off" />));
|
const input = findNativeInput(shallow(<TextInput autoComplete="off" />));
|
||||||
expect(input.prop('autoComplete')).toEqual('noop');
|
expect(input.prop('autoComplete')).toEqual('off');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('autoCompleteType fallback', () => {
|
||||||
|
const input = findNativeInput(shallow(<TextInput autoCompleteType="off" />));
|
||||||
|
expect(input.prop('autoComplete')).toEqual('off');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -95,7 +95,8 @@ class TextInput extends React.Component<TextInputProps> {
|
|||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
autoCapitalize = 'sentences',
|
autoCapitalize = 'sentences',
|
||||||
autoComplete = 'on',
|
autoComplete,
|
||||||
|
autoCompleteType,
|
||||||
autoCorrect = true,
|
autoCorrect = true,
|
||||||
autoFocus,
|
autoFocus,
|
||||||
defaultValue,
|
defaultValue,
|
||||||
@@ -144,9 +145,7 @@ class TextInput extends React.Component<TextInputProps> {
|
|||||||
|
|
||||||
Object.assign(supportedProps, {
|
Object.assign(supportedProps, {
|
||||||
autoCapitalize,
|
autoCapitalize,
|
||||||
// Browser's treat autocomplete "off" as "on"
|
autoComplete: autoComplete || autoCompleteType || 'on',
|
||||||
// https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164
|
|
||||||
autoComplete: autoComplete === 'off' ? 'noop' : autoComplete,
|
|
||||||
autoCorrect: autoCorrect ? 'on' : 'off',
|
autoCorrect: autoCorrect ? 'on' : 'off',
|
||||||
autoFocus,
|
autoFocus,
|
||||||
classList: [classes.textinput],
|
classList: [classes.textinput],
|
||||||
|
|||||||
@@ -21,6 +21,7 @@ export type TextInputProps = {
|
|||||||
...ViewProps,
|
...ViewProps,
|
||||||
autoCapitalize?: 'characters' | 'none' | 'sentences' | 'words',
|
autoCapitalize?: 'characters' | 'none' | 'sentences' | 'words',
|
||||||
autoComplete?: string,
|
autoComplete?: string,
|
||||||
|
autoCompleteType?: string, // Compat with React Native (Bug react-native#26003)
|
||||||
autoCorrect?: boolean,
|
autoCorrect?: boolean,
|
||||||
autoFocus?: boolean,
|
autoFocus?: boolean,
|
||||||
blurOnSubmit?: boolean,
|
blurOnSubmit?: boolean,
|
||||||
|
|||||||
Reference in New Issue
Block a user