Skip to content

Commit f61a676

Browse files
golearyoliviertassinari
authored andcommitted
[Autocomplete] Document how to disable chrome autofill (#19126)
1 parent 4f9c2fc commit f61a676

File tree

3 files changed

+24
-2
lines changed

3 files changed

+24
-2
lines changed

docs/src/pages/components/autocomplete/CountrySelect.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export default function CountrySelect() {
4949
fullWidth
5050
inputProps={{
5151
...params.inputProps,
52-
autoComplete: 'disabled', // disable autocomplete and autofill
52+
autoComplete: 'new-password', // disable autocomplete and autofill
5353
}}
5454
/>
5555
)}

docs/src/pages/components/autocomplete/CountrySelect.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export default function CountrySelect() {
4949
fullWidth
5050
inputProps={{
5151
...params.inputProps,
52-
autoComplete: 'disabled', // disable autocomplete and autofill
52+
autoComplete: 'new-password', // disable autocomplete and autofill
5353
}}
5454
/>
5555
)}

docs/src/pages/components/autocomplete/autocomplete.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,28 @@ Search within 10,000 randomly generated options. The list is virtualized thanks
167167

168168
## Limitations
169169

170+
### autocomplete/autofill
171+
172+
The browsers have heuristics to help the users fill the form inputs.
173+
However, it can harm the UX of the component.
174+
175+
By default, the components disable the **autocomplete** feature (remembering what the user has typed for a given field in a previous session) with the `autoComplete="off"` attribute.
176+
177+
However, in addition to remembering past entered values, the browser might also propose **autofill** suggestions (saved login, address, or payment details).
178+
In the event you want the avoid autofill, you can try the following:
179+
180+
- Name the input without leaking any information the browser can use. e.g. `id="field1"` instead of `id="country"`. If you leave the id empty, the component uses a random id.
181+
- Set `autoComplete="new-password"`:
182+
```jsx
183+
<TextField
184+
{...params}
185+
inputProps={{
186+
...params.inputProps,
187+
autoComplete: 'new-password',
188+
}}
189+
/>
190+
```
191+
170192
### iOS VoiceOver
171193

172194
VoiceOver on iOS Safari doesn't support the `aria-owns` attribute very well.

0 commit comments

Comments
 (0)