[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"', () => { 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');
}); });
}); });
+3 -4
View File
@@ -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,