material-ui TextField disable Browser autoComplete

Question

I use material ui v0.20.0 and I have to prohibit saving the password for a user with TextField. I added props to TextField autocomplete='nope' cause not all the browsers understand autocomplete='off'. It seems that the last version of Chrome 63 does not accept it. Sometimes it does not work and sometimes it does. I can not get why it works so hectic. When chrome asks to save password and I save it, and after that I want to edit input I still have this :

  <TextField
         name='userName'
         floatingLabelText={<FormattedMessage id='users.username' />}
         value={name || ''}
         onChange={(e, name) => this.changeUser({name})}
         // autoComplete='new-password'

    /> 

    <TextField
        name='password'
        floatingLabelText={<FormattedMessage id='users.passwords.new' />}
        type='password'
        value={password || ''}
        onChange={(e, password) => this.changeUser({password})}
        autoComplete='new-password'
   />

Looks like it works in Firefox(v57.0.4)

By default TextField does not have autoComplete='off'

Solution 1

This seems to have worked for me (we are using material ui with redux form)

 <Textfield
  inputProps={{
    autocomplete: 'new-password',
    form: {
      autocomplete: 'off',
    },
  }}
  />

"new-password" works if the input is type="password "off" works if its a regular text field wrapped in a form

Solution 2

To Disable auto Complete in material-ui TextField. its works for me

<TextField
  name='password'
  autoComplete='off'
  type='text'
  ... 
/>

should be autoComplete='off'

autoComplete='off'

Solution 3

With Material UI input you can use

autoComplete="new-password"

So you will have something like this input :

<TextField
 autoComplete="new-password"
/>

This was a big help for example to avoid more styles from the browser on a login page.

Hope this helps to others!

Solution 4

the autocomplete must be inside inputProps

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

is good way

Solution 5

As mentioned in the Material-UI documentation: Add the following to the TextField.

<TextField
  inputProps={{
     ...params.inputProps,
     autoComplete: 'new-password',
   }}
 />
  

It disables the browser autofill suggestions and can also be used on the Autocomplete's TextField component. Note: Also there are two separate properties inputProps and InputProps. You can apply both on the same item. However, the inputProps prop fixes the autocomplete issues.

View more solutions

Comments

[Palaniichuk Dmytro]

it is related to AutoComplete component not for TexField When I pass autocomplete to texfield the react render it to input, but it does not work.

[Hemadri Dasari]

It applies to Texfield as well. You don’t need to pass autoComplete=“off” it is default now. <TextField autoComplete='off' floatingLabelText="From" ... />

[Palaniichuk Dmytro]

I added the screenshot for that, looks like TexField has not autocompleted by default. But the problem with type='password', when I create a new user and save his password, and after that create the new one, the browser propose has already saved the previous password in the browser. I need to avoid it as admin

[KeitelDOG]

Yes thanks! With Material UI I just tested it, even with <TextField type="password" />, adding autoComplete="new-password" will also disable autocomplete on Email TextField.

[Simon Long]

This was driving me nuts! Thank you.

[CoderPug]

Using other alternatives also mess the behavior of the Autocomplete element This solution worked for me without affecting the Autocomplete behavior. Thanks!

[Supun Praneeth]

adding autoComplete: 'off' to input does not disable autocomplete

[Extender]

Works for me! Thanks!

[flyandi]

Same! How insane! Thanks again.

[MrOli3000]

This is the only way to stop chrome from autofilling a TextField inside a Material-UI Autocomplete field. None of the other answers work.

[vighnesh153]

Confirmation: this works in Material UI (@material-ui/core: ^4.11.2). Tested on 5th Jan 2020.

[Qingshan]

chrome still give you a suggestion list even you set the autoComplete to off in Material UI, I tried other values like 'none', it worked for some inputs, but broke others. This solution works for me.

[APu]

How do you turn off autocomplete for a password field?

[Danish]

this doesn't work anymore Chrome Version 91.0.4472.77 (Official Build) (x86_64) OSX

[Tim Hysniu]

this worked for me. It's hard to believe this is the only way to disable autocomplete.

[MintWelsh]

This caused issues of missing params, I think to include ...params.inputProps, might be what fixed it for me, as shown in the linked answer, if other people have this issue stackoverflow.com/a/65737792/3810321

[Wachaga Mwaura]

Works on Chrome 97. Thanks.

[Canonne Gregory]

if you have others inputProps, yes ! you shoulds dump this ! like : inputProps={{ ...yourInputProps /* or your naming */ autoComplete: 'off' }}

[Amir Maleki]

Perfect! This spectacular answer did the job on Chrome 102. Putting autocomplete inside inputProps is important...