Disabling Chrome Autofill on React

There was an issue where chrome was doing autocomplete on one of my fields always even by setting flag autocomplete to be false or of, there are a lot of questions about this on stackoverflow:

Here are some of them:
https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
https://stackoverflow.com/questions/12374442/chrome-ignores-autocomplete-off

Browsing I found this solution:https://medium.com/paul-jaworski/turning-off-autocomplete-in-chrome-ee3ff8ef0908

The solution to this is on the top comment Which is basically wrap your input inside a form, and that's it.:


But this introduced bugs on my react application:

So here is other solution without making your input part of a form

As you can see 2 things are happening here:
  • randomId is being generated, this is needed so chrome does not try to autocomplete
  • fake password input was added, this is to aoid chrom trying to use the first input found on the DOM being used as password
This solved the issue for me, and is the combination of several solutions on the posts above.

I hope this works for you as well

Comments