-
-
Notifications
You must be signed in to change notification settings - Fork 32.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Autosuggest] Disable auto-fill? #18556
Comments
Do you have a reproduction? |
@robertabenassi I had the same problem. It worked when I removed the id prop on the Autocomplete component |
Also, do you have an issue with the auto-complete or auto-fill feature of the browser? |
@oliviertassinari For me it was the auto-fill in Chrome. Even though I set the prop autoComplete="off" (in InputProps to the TextField component) it would not be set, so the options from Chrome visually "covered" the options in the Autocomplete component. It only worked when I removed the id prop from the Autocomplete component. |
@sarahse I'm not aware of any reliable way to disable auto-fill :/. |
@oliviertassinari |
Based on JedWatson/react-select#3500, |
I think that we could try an update of the documentation with something like this: diff --git a/docs/src/pages/components/autocomplete/CountrySelect.tsx b/docs/src/pages/components/autocomplete/CountrySelect.tsx
index aa3401e34..fd448131c 100644
--- a/docs/src/pages/components/autocomplete/CountrySelect.tsx
+++ b/docs/src/pages/components/autocomplete/CountrySelect.tsx
@@ -49,7 +49,7 @@ export default function CountrySelect() {
fullWidth
inputProps={{
...params.inputProps,
- autoComplete: 'disabled', // disable autocomplete and autofill
+ autoComplete: 'new-password', // disable autocomplete and autofill
}}
/>
)}
diff --git a/docs/src/pages/components/autocomplete/autocomplete.md b/docs/src/pages/components/autocomplete/autocomplete.md
index 09c28c100..79f2e3678 100644
--- a/docs/src/pages/components/autocomplete/autocomplete.md
+++ b/docs/src/pages/components/autocomplete/autocomplete.md
@@ -166,6 +166,23 @@ Search within 10,000 randomly generated options. The list is virtualized thanks
VoiceOver on iOS Safari doesn't support the `aria-owns` attribute very well.
You can work around the issue with the `disablePortal` prop.
+### Autofill
+
+The browsers have heuristics to apply autofill suggestions.
+In the event you don't want the navigator to automatically fill the input, you can try the following:
+
+- Use an `id` without any information the browser can use. e.g. don't use `id="country-field-2"`. By default, the component uses a random id.
+- Set `autoComplete="new-password"`:
+ ```jsx
+ <TextField
+ {...params}
+ inputProps={{
+ ...params.inputProps,
+ autoComplete: 'new-password',
+ }}
+ />
+ ```
+
## Accessibility
(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#combobox) |
@oliviertassinari |
So the id approach is the only that work? If you confirm it, I would propose we stick to only document this option. Does it even need to be different each time or removing any field content indicator is enough? |
As I mentioned in #18686, there is a chrome issue which explains that chrome deliberately ignores the Allowing |
@Slessi My experience with this approach has been that it does disable autofill but enable autocomplete back :/. We were using this approach in the first release of the component.
This is a concern for #18686 |
disabling id works for me, but I'm concerned about potential side-effects. |
including the recommendation from mui#18556 in the docs.
My experience with Autocomplete dropdown shows auto-fill / suggestion in chrome browser. The solution worked for me:
|
@ni3galave This is the only solution that work for me. |
Thanks @ni3galave! You saved my life. form wrapper with the autocomplete prop works for me. I tried |
autoComplete="off" doesn't work.
Not elegant but functionnal. |
|
Same issue. Can't disable suggestions (I need it specially for autocomplete field) Tried: Random strings was working but after upgrading chrome is not working anymore. Any other trick? |
in my case this worked for me (not autocomplete='off' neither unique id) |
@ni3galave Sollution is the only one that worked for me. Thanks! Setting autoComplete to "off" as documented, works as well. |
none of them worked |
Hi all,
I am not sure that what I am describing is a real bug.
When I use the autocomplete component I am not able to turn off the autocompletition provided by browser (e.g. Chrome).
I am using the Autocomplete component in freeSolo mode, here the step to reproduce
I applied autocomplete="off" to textfield and form containing the textfield but this did not work.
The text was updated successfully, but these errors were encountered: