3

My project is in ReactJS and Redux and I am using redux-form for my forms. I have two forms (both have input type text and password fields) in a page in my website. Now, chrome shows the autofill list for one form in the other and it is not working properly due to which bounce rate in my website has increased.

I would like to disable the autofill and autocomplete dropdown list but not getting any solution for this. My Chrome version is Version 71.0.3578.98.

I have tried the following things (as read from other Stack Overflow links); but none of them works.

The only this which seems to work properly is make the fields readonly and remove readonly when user starts to type (onKeyDown event). Then if user presses the backspace and input is empty, make is readonly again otherwise the autofill dropdown list again shows up. This solution is more of a hack and I would like to know any better solution for this.

PS: This is a duplicate question but I have not got any relevant solution for this which works in new version of Chrome. Links which I followed: Disabling Chrome Autofill, Chrome ignores autocomplete="off", How to disable Chrome to autofill username/email password?, Disable Google Chrome Autocomplete / Autofill / Suggestion and a lot more.

halfer
  • 18,701
  • 13
  • 79
  • 158
Sunil Chaudhary
  • 3,353
  • 1
  • 15
  • 33

6 Answers6

1

I've been trying to get a reliable method of stopping exactly this and the only solution I've found to work is placing a couple of hidden fields at the top of the body.

<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

Hacky, I know, but I even tried the exact example given in the Chrome team response link that Coderer mentioned:

As an example, if you have an address input field in your CRM tool that you don't want Chrome to Autofill, you can give it semantic meaning that makes sense relative to what you're asking for: e.g. autocomplete="new-user-street-address". If Chrome encounters that, it won't try and autofill the field.

...but that doesn't work (although the post is many years old).

lifeform
  • 25
  • 4
0

Have you tried the advice from this official Chrome team response?

In cases where you really want to disable autofill, our suggestion at this point is to utilize the autocomplete attribute to give valid, semantic meaning to your fields. If we encounter an autocomplete attribute that we don't recognize, we won't try and fill it.

This won't actually work if you don't have a valid name attribute. So, have you tried something like <input type="text" name="fieldX" autocomplete="my-site-field-x">? The values used for name and autocomplete might matter, as I've heard some people suggest that Chrome will sometimes do fuzzy matching against the recognized values from the spec (like address, telephone, email, etc).

Coderer
  • 21,290
  • 22
  • 71
  • 124
  • 2
    That post is from 2016 and won't work anymore. Google pushed out an update this week (v. 72.0.3626.x) that ignores all autocomplete settings, including "new-password". If it detects an input field of type "password" anywhere in the code, it will auto-populate the username in the first (or random) input field that it finds. – PeterToTheThird Feb 14 '19 at 18:32
  • Has anybody from the Chrome team published any updated guidance, then? I have had success with this guidance for forms that don't include a password. (As an aside, in my personal usage, I can't remember the last time autofill actually did what I wanted it to...) – Coderer Feb 18 '19 at 10:03
0

I was able to disable Chrome autofilling feature by creating hidden input right before my input and adding random number for the original input name:

<input type="text" name="address" value="" readOnly={true} style={{display: "none"}}/>
<input
  ref={inputRef}
  className="form-control"
  type="text"
  name={"address " + Math.random()}    <--- add random number to prevent Chrome autofill
  required
  placeholder="New York"
  value={location.address}
  onChange={handleInputChange}
/>
Alexander
  • 1,593
  • 18
  • 21
0

I found a way can make hidden input solution work. I've used it in my project to disable chrome auto-populate my username. 

<!-- add a dummy input element and make sure chrome will auto-populate your username(or address etc) to it -->
<input type="text" style="pointer-events: none; opacity: 0; position: absolute">

pointer-events: none;  => make it not the target of pointer events
opacity: 0;   => make it disappear
position: absolute;   => don't let it break your dom structure

Works fine in Chrome 75.0.3770.100.

Hope it can help.

Yan
  • 570
  • 1
  • 5
  • 13
0

This will work 

<input type="any" readonly onfocus="this.removeAttribute('readonly');">
aprinciple
  • 636
  • 4
  • 7
0

Alternative approach

The root cause of this problem is that setting input type="password" automatically makes all saved credentials to pop up, and nothing seems to work in order to stop it.

The general idea of this solution is to avoid setting type="password" and making the input text look like a password field. Fortunately, doing this in Chrome is pretty simple, but unfortunetely this doesn't work for Firefox, Internet Explorer and Firefox Android, acording to this link https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-security

The solution

Instead of using the classic input with type set to password

<input type="password"/>

do the following:

<input type="text" style="-webkit-text-security: disc;"/>

Hope this solution is useful for you.

Dante Rosales Díaz
  • 39
  • 3