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:
- Use a
name
attribute that is not contained in the predefined auto-fill fields of Chrome. - Toggle the
name
attribute onfocus
andfocusout
.
<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>