CODEWITHSUNDEEP
htmlformsinputautocompletematerial-ui
Palaniichuk Dmytro
Palaniichuk Dmytro

Reputation: 3173

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 : enter image description here 

  <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' enter image description here

Upvotes: 76

Views: 145516

Answers (23)

Pranjal Choladhara
Pranjal Choladhara

Reputation: 913

None of the above worked for me. I do not know why.

<TextField 
label="Your Name" 
name={`search${Date.now()}`}
autoComplete="none" />

I've added a name to the TextField: search${Date.now()}. Now it is working fine. I am not sure if it helps somebody or not.

Upvotes: 0

Ethan K
Ethan K

Reputation: 140

For anyone encountering this in 2025 our solution was to use the TextField like this:

<TextField
      name={disableAutoFill ? "noAutoFill" : undefined}
      autoComplete={disableAutoFill ? 'new-password' : "on"}
      type={getTextFieldType()}
/>

Where disableAuthFill is a boolean we provide to our system component, and getTextFieldType() returns either 'password' or 'text'.

Upvotes: 0

Felipe
Felipe

Reputation: 424

If anyone is reading this in 2024 using MUI v6.1.3 and wants to disable the auto complete to all TextField's components without having to pass it manually every time, here is the solution, setting the config in the theme:

import { createTheme } from "@mui/material/styles";
export const theme = createTheme({
  // ...Other configs
  
  // Just change here and it will apply to all TextFields
  components: {
    MuiTextField: {
      defaultProps: {
        autoComplete: "off",
      },
    },
  },
});

Upvotes: 0

Wilhelm Sorban
Wilhelm Sorban

Reputation: 1131

None of the solutions mentioned above worked, until I discovered that Chrome added an autocomplete, due to the id parameter, which in my case was called "country". This is because, apparently, chrome's "smart" autofill functionality will take into consideration the id's value, to detect what possible autofills to give., regardless of what you set at the autoComplete parameter. And in fact, what worked best for me, was to not add any ID, like such:

<TextField
   ....
   /* id="" DO NOT ADD THIS PARAMETER!! */
   autoComplete="new-password"
/>

Upvotes: 0

Zeeshan Ahmad Khalil
Zeeshan Ahmad Khalil

Reputation: 861

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

Upvotes: 0

Sushanth
Sushanth

Reputation: 61

Below fix worked for me

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

Upvotes: 0

ha_nguyen
ha_nguyen

Reputation: 1

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

Upvotes: 0

Shaun Pearce
Shaun Pearce

Reputation: 96

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

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

Upvotes: 3

Alouani Younes
Alouani Younes

Reputation: 1046

Add the attribute to the 

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

Upvotes: 1

Nicholas Aponte
Nicholas Aponte

Reputation: 155

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

Upvotes: 3

Elie Bsaibes
Elie Bsaibes

Reputation: 36

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

Upvotes: 0

Chukwuemeka Maduekwe
Chukwuemeka Maduekwe

Reputation: 8546

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

Upvotes: 8

Rusty
Rusty

Reputation: 4473

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.

Upvotes: 16

Steve
Steve

Reputation: 5005

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

Upvotes: 5

Canonne Gregory
Canonne Gregory

Reputation: 424

the autocomplete must be inside inputProps

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

is good way

Upvotes: 17

Ben Ahlander
Ben Ahlander

Reputation: 1333

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

Upvotes: 75

Thanmai C
Thanmai C

Reputation: 761

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.

Upvotes: 9

Steve Sheldon
Steve Sheldon

Reputation: 6641

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

Upvotes: 2

Ismael Terreno
Ismael Terreno

Reputation: 1131

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!

Upvotes: 26

D V Yogesh
D V Yogesh

Reputation: 3700

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'

Upvotes: 74

Mateusgf
Mateusgf

Reputation: 899

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'

Upvotes: 4

Palaniichuk Dmytro
Palaniichuk Dmytro

Reputation: 3173

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

Upvotes: 5

Hemadri Dasari
Hemadri Dasari

Reputation: 34004

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.

Upvotes: 1

Related Questions