[Autosuggest] Disable auto-fill?

[robertabenassi]

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

• type a value on the TextField, a chip is rendered with the value
• I delete the Chip.
• try to type the same value I have just inserted, an annoying Chrome autosuggest proposal appears.

I applied autocomplete="off" to textfield and form containing the textfield but this did not work.

Tech	Version
Material-UI	v4.6.1
React	16.12
Browser
TypeScript	>3.7
etc.

[oliviertassinari]

Do you have a reproduction?

[sarahse]

@robertabenassi I had the same problem. It worked when I removed the id prop on the Autocomplete component

[oliviertassinari]

Also, do you have an issue with the auto-complete or auto-fill feature of the browser?

[sarahse]

@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.

[oliviertassinari]

@sarahse I'm not aware of any reliable way to disable auto-fill :/.

[robertabenassi]

@oliviertassinari
Hi Oliver, the trouble is the same that @sarahse described. I managed to avoid the Chrome autosuggest to assign a new id each time the app has to be refreshed.

[oliviertassinari]

Based on JedWatson/react-select#3500, autoComplete="new-password" seems to be a viable alternative. Do you confirm?

[oliviertassinari]

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)

[robertabenassi]

@oliviertassinari
Hi Olivier,
I tried to use autoComplete="new-password", in the TextFiedl which I used to input text on autocomplete components. However, it seems not to work properly.
I will try again on Material UI 4.7.0, since I had to update my project.

[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?

[Slessi]

As I mentioned in #18686, there is a chrome issue which explains that chrome deliberately ignores the off value and if you really want to disable autofill on chrome you must set a value other than off which is "unexpected", e.g. dont-fill-me-pls

Allowing autoComplete to be overridable by the end user for TextField would be enough to resolve this issue. I realise it is documented in the API but it doesn't work for Autocomplete due to this line of code inside useAutocomplete

[oliviertassinari]

if you really want to disable autofill on chrome you must set a value other than off which is "unexpected", e.g. dont-fill-me-pls

@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.
After a dozen people reporting the issue, we changed it.

Allowing autoComplete to be overridable by the end user for TextField would be enough to resolve this issue. I realise it is documented in the API but it doesn't work for Autocomplete due to this line of code inside useAutocomplete

This is a concern for #18686

[goleary]

disabling id works for me, but I'm concerned about potential side-effects.

[ni3galave]

My experience with Autocomplete dropdown shows auto-fill / suggestion in chrome browser.
I tried providing autoComplete="new-password" to TextField element (renderInput prop of <Autocomplete) but it wont worked.

The solution worked for me:

<Autocomplete
 ...
  renderInput={(params) => (
        <form autoComplete={"new-password"}>
           <TextField .../>
       </form>
  )}
/>

[mahady-manana]

@ni3galave This is the only solution that work for me.
Disabling the id doesn't seem to work.

[artawood]

Thanks @ni3galave! You saved my life. form wrapper with the autocomplete prop works for me.

I tried inputProps solution in TextField, but it completely disabled the AutoComplete component and it added padding in the input field, which created more issues.

[perfectdeed]

autoComplete="off" doesn't work.
The only thing fixing this bug that work for me is using:

renderInput={(params) => {
          // MUI mess fix
          const saneParams = {
            ...params,
            inputProps: {
              ...params.inputProps,
              autoComplete: 'nope',
            },
          };
          return (
            <TextField
              {...saneParams}
              variant="outlined"
              label={t(lang, 'forms.contact.address')}
              placeholder={t(lang, 'forms.contact.address')}
            />
          );
        }}

Not elegant but functionnal.
I added this comment in case someone else need this.

[david-mart]

autocomplete="off" seems to work for me in Chrome, Safari and Opera, however, in does not disable autofill (i.e. saved addresses, credit cards etc). This is my current solution which seems to work well on every browser

import { TextField, TextFieldProps } from '@mui/material';
import { v4 } from 'uuid';

type Props = TextFieldProps;

const XTextField: React.FC<Props> = ({ ...props }) => {
  const uniqueId = v4();
  return (
    <TextField
      {...props}
      inputProps={{ ...props.inputProps, autoComplete: uniqueId, id: uniqueId }}
      InputLabelProps={{ htmlFor: uniqueId }}
    />
  );
};

[wilav-dev]

Same issue. Can't disable suggestions (I need it specially for autocomplete field)

Tried:
off
none
new-password
random strings
Date.now().toString()

Random strings was working but after upgrading chrome is not working anymore. Any other trick?

[ConstanzaDi]

in my case this worked for me (not autocomplete='off' neither unique id)
renderInput={params => <TextField {...params} name='new-password' />}

[j-dbn]

@ni3galave Sollution is the only one that worked for me. Thanks!

Setting autoComplete to "off" as documented, works as well.
<Autocomplete ... renderInput={(params) => ( <form autoComplete="off"> <TextField .../> </form> )} />

[wpsix]

none of them worked