'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

Solution 1:^[1]

Do autocomplete="new-password" to disable autocomplete.

Solution 2:^[2]

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 ;)

Solution 3:^[3]

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);
}}

Solution 4:^[4]

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.

Solution 5:^[5]

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

Solution 6:^[6]

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

Solution 7:^[7]

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.

Solution 8:^[8]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	illiteratewriter
Solution 2	Dekel Dahan
Solution 3	Dimitri Kopriwa
Solution 4	zhengshan cao
Solution 5	Simon
Solution 6
Solution 7	h '
Solution 8	Rohan Mehra

'How to disable Chrome autocomplete feature?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]