[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:
Nicolas Gallagher
2019-12-18 22:31:45 +00:00
parent 5334a4f0d8
commit b10711bddd
3 changed files with 10 additions and 5 deletions
@@ -25,7 +25,12 @@ describe('components/TextInput', () => {
test('value "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');
});
});
+3 -4
View File
@@ -95,7 +95,8 @@ class TextInput extends React.Component<TextInputProps> {
render() {
const {
autoCapitalize = 'sentences',
autoComplete = 'on',
autoComplete,
autoCompleteType,
autoCorrect = true,
autoFocus,
defaultValue,
@@ -144,9 +145,7 @@ class TextInput extends React.Component<TextInputProps> {
Object.assign(supportedProps, {
autoCapitalize,
// Browser's treat autocomplete "off" as "on"
// https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164
autoComplete: autoComplete === 'off' ? 'noop' : autoComplete,
autoComplete: autoComplete || autoCompleteType || 'on',
autoCorrect: autoCorrect ? 'on' : 'off',
autoFocus,
classList: [classes.textinput],
@@ -21,6 +21,7 @@ export type TextInputProps = {
...ViewProps,
autoCapitalize?: 'characters' | 'none' | 'sentences' | 'words',
autoComplete?: string,
autoCompleteType?: string, // Compat with React Native (Bug react-native#26003)
autoCorrect?: boolean,
autoFocus?: boolean,
blurOnSubmit?: boolean,