Kendo-ui-core: Kendo and Google Chrome Autocomplete open Simultaneously

[jamesomac]

Bug report

Reproduction of the problem

The behaviour can be seen using the example below and attempting to type the first letter of any city which has been saved as part of an address within the user's Google Chrome autocomplete settings. This can only be seen with Google's Autocomplete turned on. The Google Autocomplete suggestion will appear on top of the Kendo suggestions.

An example can be found here: https://dojo.telerik.com/ekezApiZ

Expected/desired behavior

The Kendo Autocomplete dropdown should appear, but the Google Chrome autocomplete should not.

Environment

• Kendo UI version: 2018.1.221
• jQuery version: 1.12.3
• Browser: Chrome 65.0.3325.181

[e2canoe]

I believe this issue is caused by a change in how the autocomplete="off" attribute is interpreted by Chrome. According to this response from Chromium.org, Chrome was changed to ignore "off".

According to that same post, the solution to completely disabling Chrome's autocomplete is to give the input's autocomplete attribute a value that does not match any of the WHATWG autocomplete tags and Chrome will not display an autocomplete box. So, perhaps the kendo-combobox control could expose it's own autocomplete attribute whose value would be assigned to the rendered input's autocomplete so that developers can control whether the kendo-combobox can override the Chrome autocomplete or not.

[derrickh1980]

I am experiencing the same behavior with the angular combobox as well. I don't have an id on the kendo-combobox but I have a label next to it with the text "Country" in it. If I change the text value in the label to "Countr y" the autocomplete turns off. I haven't been able to turn off the autocomplete any other way.

<label>Country</label> <kendo-combobox [data]="countryItems | async" [allowCustom]="false" textField="value" valueField="id"> </kendo-combobox>

[AndersMad]

This has been reported almost year a go - and the fix is simply to replace all autocomplete="off" to autocomplete="disabled" - so pleeease? ~:)

[timopb]

This has been reported almost year a go - and the fix is simply to replace all autocomplete="off" to autocomplete="disabled" - so pleeease? ~:)

autocomplete="disabled" will _fix_ the issue for chrome but then firefox will start to autocomplete the field as it is following w3c standards and expects autocomplete="off" to prevent autocomplete. So... no real fix here.

[fschlaef]

@timopb it's ok, the Kendo team implemented it like this :

AUTOCOMPLETEVALUE = support.browser.chrome ? 'disabled' : 'off'

Everything should be OK

[fschlaef]

I am still having this issue with Chrome 75 and Kendo UI 2019.2.619
On Firefox everything is OK but on Chrome the browser autocomplete popup still opens over the Kendo list.

@Juveniel @mparvanov @jivanova

[mparvanov]

@fschlaef I tried but was not able to replicate the problem with Kendo v. 2019.2.619 and Chrome 75 on my side.
Here is a screenshot of my test over the Kendo autocomplete https://take.ms/KAdku and on a simple input for the city field https://take.ms/sHNeg.

Could you confirm whether you are experiencing the issue with this Dojo sample on your side or provide a modified sample so we could replicate it on our side?

[fschlaef]

@mparvanov the issue only triggers if there is a name attribute on the element, and if the element is contained within a form and submitted.
See here for repro with kendoComboBox : https://dojo.telerik.com/USoHopEc/3

How to repro, on Chrome 75 :

Open the menu and select any value (for example, "Chang")
Submit the form
Re-run the snippet
Open the menu again, then click on the text part of the menu (search)
Result :

[mparvanov]

I can confirm the issue is reproducible with v 2019.2.619 in Chrome 76.

[Juveniel]

There are currently two distinct Chrome functionalities which are subject to this issues - Autofill and Autocomplete. The autofill spec currently states that the off value for the autocomplete attribute should correctly mark an input as a one that contains sensitive data, thus disabling the autocomplete and autofill.

Taking the above into consideration, we will stick to setting the autocomplete attribute to "off" for the Kendo Autocomplete. After further testing in Chrome 76, Beta (77) and Canary(78) this seems to correctly handle the autocompletion popups which are not being displayed.

If there are any scenarios where the "off" value fails for the autocomplete attribute and the popup is shown, this should be reported to Chrome in the following open bug report. We have also prepared a Knowledge Base Article that provides an alternative solutions for such edge-cases to disable the autocomplete of Chrome.

[fschlaef]

Confirmed working with latest version, thank you very much ! 👍

[egorpavlikhin]

The issue still exists and the KB link provided is broken.

[Juveniel]

Hello @egorpavlikhin,

I was not able to reproduce the issue with the latest version of Chrome (80.0) and the latest release of Kendo UI(2020.1.219). Could you verify if you are able to reproduce the issue in the official Demos ? If this is indeed the case, please provide a list of steps that would enable us to reproduce the issue and also add any specific details that you think might be important.

In terms of the KB link, indeed you are correct that it is currently not accessible. We are aware of the issue and will try to resolve it as soon as possible. In the mean time, here is the workaround that you could try:

1. Use a name attribute that is not contained in the predefined auto-fill fields of Chrome.
2. Toggle the name attribute on focus and focusout.

<form>
  <input name="city" ID="City" required />
</form>

<script>
  var data = [
    "Toronto",
     "New York",
     "London",
     "Paris"
   ];

   var name;
   var CityAutoComplete = $("#City").kendoAutoComplete({
     dataSource: data,
     filter: "startswith",
     placeholder: "Select city...",
     separator: ", "
   }).getKendoAutoComplete();

   CityAutoComplete.element.on("focus", function () {
     name = this.name;
     this.name = kendo.guid().substr(0, 8);
   });

   CityAutoComplete.element.on("focusout", function () {
     this.name = name;
   });
</script>