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

• JavaScript API Reference of the AutoComplete
• Product Page of the jQuery AutoComplete
• jQuery AutoComplete Overview (Demo)