material-ui TextField disable Browser autoComplete

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