htmlreactjsmaterial-uiautocompletetextfield

How to disable Material UI textfield autocomplete?


I am using the latest version of Material UI. 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:

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.


Solution

  • 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:

    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!