How to disable mui textfield autocomplete?

user_14882383 0
Viewed 90

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: enter image description here

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

material-ui reactjs html javascript
3 Answers

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',
  }}
/>
user_16462400

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!

user_148823830

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
    />
user_189431980
Related