Chrome autocomplete obstructing user input ( combobox / dropdown )

General
1

I’ve only recently noticed this, but a couple of my Forms are being taken over by Chrome’s autocomplete. Keyboard focus is captured by Chrome’s autofill and tabbing, up/down arrows don’t behave as expected. The end result is the user ends up with the last entry they chose for a dropdown instead of what they really wanted (i.e. the second entry in a filtered list not the first one that they chose earlier).

We’re still on Vaadin 7.6.6. Anyone else experiencing this?

2

Hi.

I have sometimes run into that. As a workaround: if you use the Viritin add-on, you can use the HtmlElementPropertySetter class to wrap your component and use that to set the “autocomplete” element property to “off”.

-Olli

3

Thanks Olli.

I don’t think it’s that though, the elements already have autcomplete=“nope” attributes.

I’m guessing I’ve somehow engaged Chrome’s autofill feature by accidentally clicking on something. That said I’m now wondering how our users are coping if they’ve done the same thing.

4

Hi,

if you want to just get rid of the autocomplete values for yourself, you can always go to Chrome settings and the History menu, where the “Clear browsing data” window allows you to delete just form autofill data. As for when Chrome does storing the form values, from what I understand the process is a bit heuristic and depends on some context clues in the HTML. It’d be interesting to hear if you can figure out what is causing it!

-Olli

5

This is a dirty solution, but a solution all the same (if you don’t use the Viritin add-on).

String script = "setTimeout(function(){"
					+ "var txt = document.getElementsByTagName('input');"
					+ "for(var i=0; i<txt.length; i++){"
					+ " txt[i]
.autocomplete='off';"
					+ "}"
					+ "}, 2000);";
			JavaScript.getCurrent().execute(script);

You can even add the following to validate if it is correct to replace the attribute (as explained here https://github.com/vaadin/framework/issues/7820 this is done on purpose for some versions of mozilla):

		String setAttribute = "txt[i]
.setAttribute('autocomplete', 'off');";
		if(Page.getCurrent().getWebBrowser().isChrome());{
			setAttribute = "txt[i]
.autocomplete='off';";
		}

and replace " txt[i] .autocomplete='off';" with setAttribute. Hope it helps.

6

This is a very painful issue. I’m off to try the add on but I’d love to see this fixed in core.

7

I just noticed this discussion. The issue with ComboBox has been solved since Vaadin 8.8.0