How to disable mui textfield autocomplete? [duplicate]

Question

I am using the latest version of mui. I have a user contact info form that contains a zip code field. I do not want this field to be auto completed if the value is null, but it keeps getting auto completed with the email saved in my browser. Here is what I have tried so far:

• autoComplete="off"
• autocomplete="off"
• autoComplete="nope"

And here is the code of my text field:

<Textfield
    name="zipCode"
    id="zipCode"
    label="Zipcode *"
    autoComplete='nope'
    value={addressDetails.zipCode || ""}
    onChange={updateAddressDetails}
    error={displayError(validationErrors?.zipCode)}
    helperText={validationErrors?.zipCode}
    fullWidth
    />

Below is the screenshot of my form:

Although, autoComplete='nope' is working for other fields like city but not for zipCode.

Kalle

try autocomplete="false", if this doesn't work maybe this article will answer your question thewebdev.info/2022/01/22/… – Eyas

Does this answer to your question ? #48304562 – Maddy

Have you tried in incognito mode or in different browser? Can you try it out in a different computer? If it works properly on other machines then deleting your browser cache may help. – Conviction

@MridulGupta I tried autocomplete="false" but did not work! – Kalle

Answer 1

Error got resolved! I figured out the reason for getting this error, that was a different use case. I have an update password form next to the contact info form and that update password form has three fields:

• Current password
• New password
• Confirm password

So, what was happening is that the current password field got auto-filled with a password saved in the browser because the type of that field is 'password' and the zip code field was just above this current password field so it got filled with the email of the saved password.

What I needed to do was to turn off the autocomplete for the password field so that the autocomplete of the zip code field with an email address would stop too. I tried the following options to stop password autocomplete but didn't work:

- autoComplete="nope"

- autoComplete="off"

- inputProps = {{
     autoComplete: "off"
}}

- inputProps = {{
     autoComplete: "nope"
}}

what actually worked is:

inputProps={{
     autoComplete: 'new-password'
}}

By doing this, my zip code field's auto-completing with email address (that was so strange to understand) got off too.

Thank you guys who posted answers for your help, your answers were correct but I had a completely different use case that's why no solution was working!

Kalle

Answer 2

As mui docs says:

By default, the component disables the input autocomplete feature (remembering what the user has typed for a given field in a previous session) with the autoComplete="off" attribute.

So code would look like this:

<TextField
  {...params}
  inputProps={{
    ...params.inputProps,
    autoComplete: 'off',
  }}
/>

Veery

Answer 3

I suspect the problem with your ZIP code field is that autocomplete is autoComplete?: string | undefined; so it might not work with numbers.

edit: I see it gets autocompleted with your email. Try adding this:

    <Textfield
        name="zipCode"
        id="zipCode"
        label="Zipcode *"
        inputProps={{ autoComplete: 'off' }}
        value={addressDetails.zipCode || ""}
        onChange={updateAddressDetails}
        error={displayError(validationErrors?.zipCode)}
        helperText={validationErrors?.zipCode}
        fullWidth
    />

Vindication

Thank you for your help but it did not work. Still getting the field auto completed with some email address saved in browser. – Kalle

hmm thats strange, I will look at it later again – Vindication