typeahead: autocomplete="off" no longer prevents autocomplete in Chrome

[TylerRick]

Bug description:

Chrome shows its autocomplete suggestions when I start typing. These suggestions cover up the ngbTypeahead UI, making it virtually unusable when Chrome shows its suggestions:

It also makes it possible to input a value that's not in the list of allowed options defined by one's typeahead component, which is also not desirable. Worse still, if you select an option from Chrome's autocomplete, then it doesn't trigger the needed events and doesn't end up updating the bound model (model still says undefined)!

#520 added autocomplete="off" to host, which was supposed to prevent this (and undoubtedly did until recently), but recent Chrome versions ignore this, much to the frustration of developers that depended on that behavior. See for example:

• https://stackoverflow.com/questions/47775041/disable-autofill-in-chrome-63
• https://bugs.chromium.org/p/chromium/issues/detail?id=587466
• https://stackoverflow.com/questions/15738259/disabling-chrome-autofill

Link to minimally-working plunker that reproduces the issue:

I tried but could not reproduce in a plunker. I'm not sure what the difference is in the plunker, or how to reproduce it there, but maybe someone else will know the answer.

Note that to reproduce you probably need to actually submit the form with some values so that it remembers them. I added ngNoForm in order to allow submitting the form, and tried this, but I can't get the autocomplete suggestions to show up in the plunker unless I remove the [ngbTypeahead].

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 5.2.6

ng-bootstrap: 1.0.0

Bootstrap: 4

Chromium: 64.0.3282.140 (Official Build)

[TylerRick]

I tried adding autocomplete="new-password" directly to my input, but it has no effect due to the host attributes added in #520.

Suggestion: Add a @Input for the autocomplete attribute so that users can override the default value of off if they need to (and if they think they know which value will be most effective at disabling autocomplete in the browser(s) that they know that their users will be using).

That or set it to a random value like ignored-23195871650 to ensure it won't match any existing fields that it has autocomplete data for.

One of the SO posts suggested setting to new-password but that doesn't sound like a suitable option for a non-password field to me.

I've also tried changing the name of my input to something other than country, but it still shows the same autocomplete options. Chrome seems to be using some heuristic for identifying that it is a country field that I can't figure out. Even changing the field name to something completely unrelated doesn't make it stop, at least not consistently. Is it detecting it based on the position on the form or something? I don't even know anymore...

[cleever]

Same case here.

[aleksbelic]

Maybe assigning an invalid value to autocomplete attribute could help:

In some cases, the browser will continue suggesting autocompletion values even if the autocomplete attribute is set to off. This unexpected behavior can be quite puzzling for developers. The trick to really enforcing non-autocompletion is to assign an invalid value to the attribute, for example:
autocomplete="nope"
Since this value is not a valid one for the autocomplete attribute, the browser has no way to match it, and stops trying to autocomplete the field.

Source: MDN web docs