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'

Adding `autoComplete="new-password"` as a prop to `` is what works currently as of this comment — Matt Weber, Mar 03 '20 at 19:40
This case is explained and covered by the documentation and it worked like a charm for me https://material-ui.com/components/autocomplete/#autocomplete-autofill TL;DR — Maciej Dybek, Aug 03 '20 at 17:41
As for the newest MUI this answer is the only one that works as intended: https://stackoverflow.com/a/72994887/9973445 — Dominik Myszkowski, Aug 30 '23 at 14:34

score 64 · Answer 1 · answered May 31 '19 at 06:02

64

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'

answered May 31 '19 at 06:02

D V Yogesh

3,337
1
28
39

2

Confirmation: this works in Material UI (@material-ui/core: ^4.11.2). Tested on 5th Jan 2020. – vighnesh153 Jan 05 '21 at 05:47
1

How do you turn off autocomplete for a password field? – Md. A. Apu Apr 07 '21 at 15:04
This does not work in MUI anymore. The different answer (inputProps autoComplete: 'new-password') works as intended. – Dominik Myszkowski Aug 30 '23 at 14:33

score 60 · Answer 2 · edited Mar 03 '20 at 21:37

60

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

edited Mar 03 '20 at 21:37

Matt Weber

2,808
2
14
30

answered May 20 '19 at 16:16

Ben Ahlander

1,113
11
12

3

This was driving me nuts! Thank you. – Simon Long Apr 07 '20 at 10:52
1

Same! How insane! Thanks again. – flyandi Oct 17 '20 at 19:42
2

this doesn't work anymore Chrome Version 91.0.4472.77 (Official Build) (x86_64) OSX – Danish Jun 17 '21 at 11:17
2

Works on Chrome 97. Thanks. – Wachaga Mwaura Jan 31 '22 at 18:02
1

Perfect! This spectacular answer did the job on Chrome 102. Putting `autocomplete` inside `inputProps` is important... – Amir Maleki Jun 19 '22 at 12:38
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 – MUdit TiWari Jan 06 '23 at 16:59

score 21 · Answer 3 · answered Jul 30 '19 at 20:23

21

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!

answered Jul 30 '19 at 20:23

Ismael Terreno

1,021
8
5

Yes thanks! With Material UI I just tested it, even with ``, adding `autoComplete="new-password"` will also disable autocomplete on Email TextField. – KeitelDOG Jan 05 '20 at 16:46

score 18 · Answer 4 · answered Jul 05 '20 at 01:45

18

the autocomplete must be inside inputProps

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

is good way

answered Jul 05 '20 at 01:45

Canonne Gregory

378
4
9

9

adding autoComplete: 'off' to input does not disable autocomplete – Supun Praneeth Aug 01 '20 at 16:13
Works for me! Thanks! – Extender Aug 20 '20 at 19:20
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://stackoverflow.com/a/65737792/3810321 – MintWelsh Jan 28 '22 at 17:38
if you have others inputProps, yes ! you shoulds dump this ! like : inputProps={{ ...yourInputProps /* or your naming */ autoComplete: 'off' }} – Canonne Gregory Feb 04 '22 at 16:42
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. – Phillip Havea Apr 17 '23 at 00:53

Rusty · Answer 5 · 2021-06-05T10:59:32.197

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.

score 9 · Answer 6 · answered Feb 12 '20 at 05:22

9

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.

answered Feb 12 '20 at 05:22

Thanmai C

741
1
7
10

Using other alternatives also mess the behavior of the [Autocomplete element](https://material-ui.com/components/autocomplete/) This solution worked for me without affecting the Autocomplete behavior. Thanks! – CoderPug May 26 '20 at 18:13
This is the only way to stop chrome from autofilling a TextField inside a Material-UI Autocomplete field. None of the other answers work. – MrOli3000 Oct 19 '20 at 16:26
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. – Qingshan Feb 28 '21 at 23:48

Chukwuemeka Maduekwe · Answer 7 · 2021-09-19T04:02:04.323

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

edited Sep 19 '21 at 04:02

answered Jun 26 '20 at 22:34

Chukwuemeka Maduekwe

6,687
5
44
67

Palaniichuk Dmytro · Answer 8 · 2018-01-19T12:57:54.077

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

this worked for me. It's hard to believe this is the only way to disable autocomplete. — Tim Hysniu, Aug 27 '21 at 17:57

score 4 · Answer 9 · answered Apr 12 '19 at 13:13

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'

score 3 · Answer 10 · answered Mar 04 '21 at 22:59

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

score 3 · Answer 11 · answered Feb 11 '22 at 19:36

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

score 2 · Answer 12 · answered Sep 19 '19 at 18:11

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

score 1 · Answer 13 · answered Jan 18 '18 at 03:21

1

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.

answered Jan 18 '18 at 03:21

Hemadri Dasari

32,666
37
119
162

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. – Palaniichuk Dmytro Jan 18 '18 at 08:42
It applies to Texfield as well. You don’t need to pass autoComplete=“off” it is default now. – Hemadri Dasari Jan 18 '18 at 08:52
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 – Palaniichuk Dmytro Jan 18 '18 at 09:43

score 1 · Answer 14 · answered Apr 21 '22 at 17:36

1

Add the attribute to the

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

answered Apr 21 '22 at 17:36

Alouani Younes

948
9
17

Does not appear to work. Only works if the `id` of the field is removed – Douglas Gaskell Apr 22 '22 at 03:15

score 0 · Answer 15 · answered Nov 17 '21 at 07:13

0

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

answered Nov 17 '21 at 07:13

Elie Bsaibes

36
8

score 0 · Answer 16 · answered Oct 29 '22 at 01:25

0

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

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

answered Oct 29 '22 at 01:25

Shaun Pearce

66
1
3

score 0 · Answer 17 · edited Mar 21 '23 at 13:11

0

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

edited Mar 21 '23 at 13:11

Konstantinos Gallis

956
6
11

answered Mar 15 '23 at 15:50

ha_nguyen

1
2

score 0 · Answer 18 · answered Jun 27 '23 at 14:12

0

Below fix worked for me

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

answered Jun 27 '23 at 14:12

Sushanth

51
2
5

material-ui TextField disable Browser autoComplete

18 Answers18

Linked