New to Kendo UI for jQuery? Download free 30-day trial

Chrome Browser Causes Auto-Fill Popup Issues in the AutoComplete

Environment

Product Progress® Kendo UI® AutoComplete for jQuery
Operating System Windows 10 64bit

Description 

The Chrome browser performs auto-fill popup issues in the AutoComplete component.

Cause

If the input name matches any of the predefined autofill fields, the Chrome browser ignores the autocomplete="off" setting and also the value that is set to the attribute.

Solution

To handle this issue:

  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>

See Also

In this article