autocomplete not working on Chrome

Question

I have a problem on our website where Chrome autocomplete seems not to work. It has been working in the past, but not consistently.

For example, I have an input field like this:

<input type="text" class="gwt-TextBox Inputfield TextInputfield form-control" maxlength="40" name="name" autocomplete="name" width="0" style="max-width: 26em; width: 100%;">

When I start entering my name, the autocomplete drop-down will open as expected, but when I select my name in the autocomplete drop-down, nothing happens but the drop-down closes.

No exception is logged in the console.

The page with the fields is here.

Answer 1

Stumbled upon this answer in early 2021. My issue was that autocomplete was not triggering on certain fields. Adding an id attribute to the field solved my issue, so chaning

<input type="text" name="my_field_name" /> (not working) 

to

<input type="text"  name="my_field_name" id="my_unique_id" /> (working)

started remembering the previously submitted value.

Answer 2

try to change name of the input , use something like "location" insend of "address" also if you want to keep placeholder like "address" you can use Cyrlic alphabet at list for first letter, that should prevent autofill :) Hope it will help

Answer 3

I just bumped into the same issue. The solution is to wrap the fields you want to autocomplete in a form:

<form>
<input type="text" ...
</form>

Now selecting an option from autocomplete will actually fill in the field.

Answer 4

I created a way to make it work, just set all inputs (autocomplete="off") and then change it to password and back to the original type. This is necessary because Chrome and other browsers are not accepting this attribute well, so you have to trick it to make it work:

var x = document.forms;
var i, j, field;
for (i = 0; i < x.length; i++) {
    for (j = 0; j < x[i].elements.length; j++) {
        field = x[i].elements[j].type;
        x[i].elements[j].setAttribute('autocomplete', 'off');
        x[i].elements[j].setAttribute('type', 'password');
        x[i].elements[j].setAttribute('type', field);
    }
}

The reference is: How do you disable browser autocomplete on web form field / input tags?

Answer 5

Try to something like this. Add the following autocomplete="on" in your form Tag and also input Tag.

  <form action="" method="post" autocomplete="on">
   First Name: <input type="text" class="gwt-TextBox Inputfield TextInputfield form-control" maxlength="40" name="name" autocomplete="on" width="0" style="max-width: 26em; width: 100%;">
   <input type="submit" value="Submit">
  </form>

Answer 6

i think autocomplete="name" is an true false attribute, so you may looking for an other attribute? or an js function

Answer 7

The autocomplete attribute can only handle two values; "on" or "off".

As for your code, it is recommended to keep the autocomplete="on" at the <form> level. However, if you want to keep this functionality for the name input field only, the code should be:

<input type="text" class="gwt-TextBox Inputfield TextInputfield form-control" maxlength="40" name="name" autocomplete="on" width="0" style="max-width: 26em; width: 100%;">

PS:

In some browsers you may need to activate an autocomplete function for this to work (Look under "Preferences" in the browser's menu)

Answer 8

The attribute autocomplete must be an "on" or "off"

<input autocomplete="on|off">

reference here