'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:^[1]

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 2:^[2]

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 3:^[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:^[4]

the autocomplete must be inside inputProps

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

is good way

Solution 5:^[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.

Solution 6:^[6]

Try enclose the Textfield inside the form tag with noValidate prop. Eg:

<form noValidate>
            <TextField
                label={'Enter Name'}
                required
                fullWidth
                autoFocus={true}
                value={text}
                onChange={(e) => (text = e.target.value)}
            />
</form>

I don't know for what reason the autoComplete prop doesn't work. But the above works.

Solution 7:^[7]

Fixed. Just need to add above real input field

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion - MDN https://medium.com/paul-jaworski/turning-off-autocomplete-in-chrome-ee3ff8ef0908 - medium tested on EDGE, Chrome(latest v63), Firefox Quantum (57.0.4 64-???), Firefox(52.2.0) fake fields are a workaround for chrome/opera autofill getting the wrong fields

 const fakeInputStyle = {opacity: 0, float: 'left', border: 'none', height: '0', width: '0'}

 <input type="password" name='fake-password' autoComplete='new-password' tabIndex='-1' style={fakeInputSyle} />

  <TextField
  name='userName'
  autoComplete='nope'
  ... 
/>

<TextField
      name='password'
      autoComplete='new-password'
      ... 
    />

Solution 8:^[8]

The key is to use a random text that the browser has not saved previously from any form the user has filled such as "&#6#+" or "ViewCrunch". This will also solve auto complete issue with chrome browser that leaves all fields in blue background.

<TextField
     autoComplete='ViewCrunch'
/>

//Recent versions of MUI

<TextField
     autoComplete='off'
/>

Solution 9:^[9]

This worked for me:

Whenever you want to disable a autofill for the password field (also the above field), just put this in your password input:

<input type="password" name='any-filed-name-here-password' autoComplete='new-password' />

The important thing is to have the autoComplete='new-password'

Solution 10:^[10]

The autoComplete attribute of the input props and text field props are meant to follow the HTML spec.

It seems to not work for some of us. Strangely, I don't see off listed in the spec but it doesn't turn it off for me while strings such as nope, nahhhh do - that is strings that aren't in the spec.

So I settled with none which seems to turn off the suggestions and keep things neat.

Also, setting the autoComplete prop of the text field didn't work for me...

<TextField
    className={classes.textfield}
    label='Invitees'
    placeholder='A comma seperated list of emails'
    variant='outlined'
    value={users}
    onChange={onChange}
    inputProps={{
        autoComplete: 'none',
    }}
/>;

Solution 11:^[11]

You do no longer need to provide the autoComplete='off' for the AutoComplete component on the master branch. It's added by default.

Check this thread for more details.

Solution 12:^[12]

I ran into this recently. I tried everything I found on the web but ultimately the fix that worked for me was to do the following.

DO NOT set the type="password" on the TextField component

DO Set it along with autoComplete: 'new-password' on the input props like this:

<TextField
   label="Password"
   className={classes.textField}
   name="password"
   inputProps={{
      type:"password",
      autoComplete: 'new-password'
   }} />

Solution 13:^[13]

Id like to thank and expand on @Elie Bsaisbes answer https://stackoverflow.com/a/70000217/16538978

For the life of me, autoComplete = "off" / new-password etc... would only work on some forms, and not others. Only in chrome. Finally, the solution was to add a custom name as said in the linked answer like so

             <TextField      
                name="noAutoFill"
                label="Password"
                variant="standard"
                defaultValue=""
                id="password"
                type="password"
              />

Solution 14:^[14]

Add the attribute to the

<TextField
  inputProps={{
    autoComplete: "none",
  }}
  error={!!errors.fieldname}
  {...field}
  label="Field Name"
  required
/>;

Solution 15:^[15]

If the autoComplete doesn't work, keep it but add a unique 'name' property to the component

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	D V Yogesh
Solution 2	Matt Weber
Solution 3	Ismael Terreno
Solution 4	Canonne Gregory
Solution 5
Solution 6	Thanmai C
Solution 7
Solution 8
Solution 9	Mateusgf
Solution 10	Steve
Solution 11	Hemadri Dasari
Solution 12	Steve Sheldon
Solution 13	Nicholas Aponte
Solution 14	Alouani Younes
Solution 15	Elie Bsaibes

'material-ui TextField disable Browser autoComplete

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]