Reputation: 493

How to disable Chrome autocomplete feature?

We want to disable autocomplete in Chrome browser in our React JavaScript application. We have tried a bunch of solutions available on the Internet but nothing worked. autoComplete=off is not reliable and so are other ways.

This is really important for us at this moment so can you please suggest us a foolproof way to disable autocomplete in Chrome using React JavaScript?

Secondly, we are using a common control/component for our text boxes and using them everywhere

Upvotes: 25

Answers (16)

M.K. Kim

Reputation: 531

Wrap in a <form> with autoComplete set to "off":

Make sure your <form> itself has autoComplete set to "off".



<form autocomplete="off">
  <input
    type="text"
    name="myInput"
    autocomplete="nope"
    placeholder="Enter text"
  />
  <button type="submit">Submit</button>
</form>

Upvotes: 0

HeyAddy

Reputation: 1

so i integrate two hidden input field on top of my existing input to trick chrome and this is the only solution which work for me

 <form>
  {/* Hidden input fields to trick autofill */}
  <input type="text" name="fake_user_name" autoComplete="username" style={{ display: 'none' }} />
  <input type="password" name="fake_password" autoComplete="new-password" style={{ display: 'none' }} />

  <div>
    <label htmlFor="email">Email:</label>
    <input
      type="email"
      id="email"
      name="user_email"
      value={email}
      onChange={handleEmailChange}
      autoComplete="email"
      placeholder="Enter your email"
    />
  </div>
  <div>
    <label htmlFor="phone">Phone:</label>
    <input
      type="tel"
      id="phone"
      name="user_phone"
      value={phone}
      onChange={handlePhoneChange}
      autoComplete="tel"
      placeholder="Enter your phone number"
    />
  </div>
  <button type="submit">Submit</button>
</form>

Upvotes: 0

Subhasis Das

Reputation: 1

put this before your input element

Upvotes: 0

pablito

Reputation: 21

The only thing that worked for me from the above solutions was to set the password type to text. This prevented the autocomplete on all my form input fields. I then used state and useEffect to dynamically set the type to password as soon as a value was entered for the password.

useEffect(() => {
if (!isPasswordVisible) {
  if (password.length > 0) {
    setIsPasswordVisible(true);
  }
}

}, [password]);

And in the JSX,

<InputField
        id={'signup-password-input'}
        type={isPasswordVisible ? 'password' : 'text'}
        value={password}
        name='devicePassword'
        autoComplete='new-password'
        onChangeFunc={handlePasswordChange}>
        Password
      </InputField>

Obviously, I was using an InputField component in this case.

Upvotes: 0

Avinash Verma

Reputation: 1

Use both together ,for email use autoComplete="off" and for password use autoComplete="new-password"

Upvotes: 0

HeppokoNeet

Reputation: 147

I solved with

<form autoComplete="off">
   <input
     autoComplete="new-off"
   />
</form>

Upvotes: 2

illiteratewriter

Reputation: 4333

Do autocomplete="new-password" to disable autocomplete. (For React, use autoComplete)

This is a hint, which browsers are not required to comply with. However modern browsers have stopped autofilling elements with autocomplete="new-password" for this very reason.

MDN

Upvotes: 34

Kolyo Peev

Reputation: 203

Try not to set the type attribute, if you have a password and username, remove both of those input types and voila.. problem solved

Upvotes: 1

uana13

Reputation: 35

For me changing just the autoComplete attribute to 'new-password' didn't work on its own because the name attribute of the field was set to 'password'. As soon as I changed that to something else it worked (in my case for example I used 'devicePassword')

<input type='password' name='devicePassword' autoComplete='new-password' />

Upvotes: 2

Rohan Mehra

Reputation: 1

try setting autocomplete="new-password" to the <input type="password">, It works.

Upvotes: 0

h '

Reputation: 1

The only workaround that worked for me:

      onChange={({ target }) => {
          if (target.autocomplete === 'off') {
            setPassword(target.value);
          }
      }}
      onFocus={({ target }) => {
        target.setAttribute('autocomplete', 'off');
      }}

The goal is just to define any attribute and check if the value is correct. I chose autocomplete just to make it obvious.

Upvotes: 0

Simon

Reputation: 78

When using jsx - you have to camel case attributes; so autoComplete="new-password" instead of autocomplete.

Upvotes: 2

Dimitri Kopriwa

Reputation: 14425

Nothing worked for me including new-password, so this is how I did:

onFocus={(event) => {
  event.target.setAttribute('autocomplete', 'off');
  console.log(event.target.autocomplete);
}}

Upvotes: 12

Dekel Dahan

Reputation: 201

You can override chrome autofill by add onFocus attribute.

render()
{
  return <input type="text" name="name" value="this is my input" autoComplete="off" onFocus={this.onFocus} />
}

In the onFocus method we need to change "autocomplete" attribute through javaScript.

onFocus = event => {

   if(event.target.autocomplete)
   {
     event.target.autocomplete = "whatever";
   }

};

This solution works for me.

let me know if it works for you ;)

Upvotes: 14

Alex

Reputation: 2126

The only hack that worked for me is to create hidden input and add random number for the original input name:

<input type="text" name="" value="" readOnly={true} style={{display: "none"}}/>
<input
  type="text"
  name={"address " + Math.random()}
/>

Upvotes: 0

zhengshan cao

Reputation: 89

I got the same issue with my React project. My solution is to use a random string for autoComplete attribute. Don't use "off", as per Pim, you need to set a invalid value to really turn auto completion off. Please also note the attribute name has to be autoComplete in React.

Upvotes: 4

How to disable Chrome autocomplete feature?

Answers (16)

Related Questions