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'

Del

Adding autoComplete="new-password" as a prop to <TextField> is what works currently as of this comment – Interlink

This case is explained and covered by the documentation and it worked like a charm for me material-ui.com/components/autocomplete/#autocomplete-autofill TL;DR <TextField inputProps={{ autoComplete: 'new-password' }} /> – Devin

As for the newest MUI this answer is the only one that works as intended: https://mcmap.net/q/281033/-how-to-disable-mui-textfield-autocomplete-duplicate – Walczak

Answer 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'

Isla

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

How do you turn off autocomplete for a password field? – Statistician

This does not work in MUI anymore. The different answer (inputProps autoComplete: 'new-password') works as intended. – Walczak

Answer 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

Abrasive

This was driving me nuts! Thank you. – History

Same! How insane! Thanks again. – Lanciform

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

Works on Chrome 97. Thanks. – Lockhart

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

It's "InputProps", not "inputProps", those are two different props, and if you use typescript, "inputProps" won't allow a key named "autocomplete". Anyway InputProps={{autoComplete: "off"}} worked for me – Norty

Answer 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!

Iconoclasm

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. – Graycegrayheaded

Answer 4

the autocomplete must be inside inputProps

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

is good way

Chelyabinsk

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

Works for me! Thanks! – Agatha

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 https://mcmap.net/q/277519/-material-ui-textfield-disable-browser-autocomplete – Jaejaeger

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

This worked for me on some field types like name but not for contact fields like email, phone and address. autoComplete: 'none' worked for me on those. – Improvvisatore

Answer 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.

Phebe

Answer 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.

Malisamalison

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

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

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. – Nympha

Answer 7

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

Merrygoround

Answer 8

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

Del

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

Answer 9

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

Ottoman

Answer 10

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'

Evangelistic

Answer 11

Id like to thank and expand on @Elie Bsaisbes answer https://mcmap.net/q/277519/-material-ui-textfield-disable-browser-autocomplete

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

Gamboge

Answer 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.

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

Wheresoever

Answer 13

None of the above worked for me, but I changed the input type to search and it worked:

<TextField type="search" ... />

Clemmie

Answer 14

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.

Aves

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. – Del

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

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 – Del

Answer 15

Add the attribute to the

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

Moses

Does not appear to work. Only works if the id of the field is removed – Incursive

Answer 16

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

Hemmer

Answer 17

const [readOnly, setReadOnly] = useState(true)

// render 
<TextField
  label="Password"
  name="password"
  readOnly={readOnly}
  onFocus={e => setReadOnly(false)}
  sx={{
    '& input': {
        textSecurity: 'disc',
        '-moz-text-security': 'disc',
        '-webkit-text-security': 'disc',
    },
  }}
/>

Estrus

Answer 18

Below fix worked for me

          <TextField
              inputProps={{
                autocomplete: 'off',
                form: {
                  autocomplete: 'off',
                },
              }}
            />

Belk

Answer 19

For me, it was auto-completing due to type="text"

         <TextField
            type="text"
            fullWidth
            onChange={handleSearch}
            size="small"
            placeholder="Search Customer"
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <Iconify
                    icon="eva:search-fill"
                    sx={{
                      color: 'text.disabled',
                    }}
                  />
                </InputAdornment>
              ),
            }}
          />

After I removed type="text" and added type="search" it stopped auto-completing

         <TextField
            type="search"
            fullWidth
            onChange={handleSearch}
            size="small"
            placeholder="Search Customer"
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <Iconify
                    icon="eva:search-fill"
                    sx={{
                      color: 'text.disabled',
                    }}
                  />
                </InputAdornment>
              ),
            }}
          />

Hike