How to disable Chrome autocomplete feature?

Question

We want to disable autocomplete in Chrome browser in our React JavaScript application. We have tried bunch of solution 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

Possible duplicate of [Chrome Browser Ignoring AutoComplete=Off](https://stackoverflow.com/questions/12374442/chrome-browser-ignoring-autocomplete-off) — Dominic, May 15 '18 at 10:16
Can you please tell why autoComplete = "off" is not reliable ? because it works like a charm. Please see the React example I have created here.. https://codesandbox.io/s/72q0z6rp61 — John Samuel, May 15 '18 at 10:57
@johnsam Because it is working for few fields while not for the others. Working for 95% scenarios — Shiva Wahi, May 15 '18 at 13:36
@ShivaWahi this is tricky cause not sure what scenario is not working .. if it was reproducible then we can help you out :) — John Samuel, May 15 '18 at 13:44
@johnsam It is tough for me to explain too. On few situations.. sutocomplete"nope" works while somewhere off is working — Shiva Wahi, May 15 '18 at 14:12

score 14 · Answer 1 · answered May 15 '18 at 11:17

14

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

answered May 15 '18 at 11:17

illiteratewriter

3,204
1
16
35

score 10 · Answer 2 · answered Jul 21 '19 at 07:23

10

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

answered Jul 21 '19 at 07:23

Dekel Dahan

161
3
5

so far this is the only solution that sees to work for me, that actually makes any sort of sense. Ive tried so many other alternatives. but they sometimes work and sometimes they dont and are unreliable, thanks! – xunux May 26 '21 at 23:22

score 7 · Answer 3 · answered May 23 '20 at 14:30

7

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

answered May 23 '20 at 14:30

Dimitri Kopriwa

8,478
12
70
140

Thank you, this is the only thing that worked for me. – craig_nelson May 18 '21 at 02:19

score 0 · Answer 4 · answered Feb 12 '19 at 02:08

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.

Alexander · Answer 5 · 2019-06-18T23:23:44.910

0

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

edited Jun 18 '19 at 23:23

answered Jun 18 '19 at 23:12

Alexander

1,593
18
21

score -1 · Answer 6 · answered Oct 26 '20 at 07:40

-1

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

answered Oct 26 '20 at 07:40

Simon

38
7

How to disable Chrome autocomplete feature?

6 Answers6

Linked