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'

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

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'

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!

the autocomplete must be inside inputProps

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

is good way

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.

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.

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'
      ... 
    />

The key is to use a random text that the browser has not saved previously from any form the user has filled such as "#+" 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'
/>

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'

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

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.

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.

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

2. 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'
       }} />
   

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"
              />
              

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

Add the attribute to the

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