IE and Edge have caused a bug with the grid filter popup

[Grahame]

 

From what I understand a change in how IE and Edge works is causing new and unwanted behavior with the gid filters in Kendo UI. The filter control text fields now have drop-down suggestion text like 1.00, 2.00, 45.00 (even if it is a date filter).

 

Replication

1. Open Edge (or IE if it is later version).
2. Go to the Demo site: http://demos.telerik.com/kendo-ui/grid/remote-data-binding
3. Click on the grid filter button/icon. (use: Order Date or Ship/City Name)
4. Click into the text value field.
5. Before you type anything note that an unwanted dropdown shows up.

Cause

From what I can understand IE and Edge now assume all <input ...>'s are autocompleate="on" even when they have no autocomplete attribute. This does not happen in Chrome. Using the debugger to manually add the autocomplete ="off" in Edge fixes it. However (code side) there is no easy way to add attributes using only CSS.

I have attached a screenshot showing what is happening on the Telerik Demo site.

 

[Stefan]

Hello Grahame,

I was able to reproduce it on Edge, but not on Internet Explorer 11 with the latest version.

Also, this is a known issue which is directly related to Edge and the Kendo UI team has no control over it.

Please check the following topics demonstrating how this can be prevented:

https://support.microsoft.com/en-us/instantanswers/c150cc25-ba25-4a61-b2bb-ff7820c4a975/autocomplete-web-forms-with-microsoft-edge

https://answers.microsoft.com/en-us/windows/forum/apps_windows_10-msedge/microsot-edge-how-to-stop-autocomplete-when-going/51c1c4c7-edce-47a2-905d-eb88208a598e

Regards,
Stefan
Progress Telerik

[Grahame]

Hi Stefan,

 

Thank you for the quick reply, both solutions involve asking the client to change settings in there browser. This may be valid for a limited number of users but for web applications that hit a wide and ever changing audience it is not a viable solution.

An example would be Facebook asking everyone to change their browser settings, so there web site would work correctly.

 

As you said this is a Microsoft thing, we have no control over it. However it can most definitely be overridden (with some help from Telerik).

 

The Kendo Grid-Filter code creates an <input ... > control, if autocomplete ="off" was added to the generated control it would not act the way it does. Moreover if we had an easy way to add attributes on control generation that could potentially solve future issues.

Perhaps there is a way of doing this already that I am unaware of?

 

Thank you again,

Grahame

[Stefan]

Hello Grahame,

In this scenario, I can suggest programmatically adding the autocomplete attribute to all input elements in the Grid, when the filter menu is initialized:

http://dojo.telerik.com/aHUKE

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-filterMenuInit

Currently, this approach can be used in this scenario, as for now, we do not plan to change the Grid rendering due to an Edge specific, which is well known and occurs with other inputs as well.

I hope the suggestion to be helpful.

Regards,
Stefan
Progress Telerik

[Grahame]

Thank you for introducing me to the "filterMenuInit Event", because of this and your working code we have a solution.

I am using Razor so the syntax looks a bit different (but this is nearly the exact code you posted).

Table (in cshtml Razor):

@(Html.Kendo()
        .Grid(Model.PersonnelList)
        .Name("Personnel")
        .DataSource(dataSource => dataSource
                .Ajax()
                .Model(model => model.Id(p => p.PersonnelID))
                .Read(read => read.Action("PersonnelGrid_Read", "Personnel")))
        .Columns(columns => {
            columns.Bound(p => p.PersonnelID).ClientTemplate("<div style='white-space:nowrap'>" + removed + "</div>").Width(canDelete ? 80 : 40).Title("").Sortable(false).Filterable(false);
            columns.Bound(p => p.EmployeeCode).Width(150).Title("Code");
            columns.Bound(p => p.DisplayName).Title("Name");
            columns.Bound(p => p.Employer).Width(200).Title("Employer");
            columns.Bound(p => p.IsUser).Title("User").ClientTemplate("<input id = 'IsUserCb' type='checkbox' name='IsUserCb'  class='k-checkbox ' #= IsUser? 'checked' : '' # disabled /><label class='k-checkbox-label' for='IsUserCb'></label>").HtmlAttributes(new { style = "text-align:center" }).Width(80).MinScreenWidth(900);
            columns.Bound(p => p.IsSalary).Title("Salary").ClientTemplate("<input id = 'IsSalaryCb' type='checkbox' name='IsSalaryCb'  class='k-checkbox ' #= IsSalary? 'checked' : '' # disabled /><label class='k-checkbox-label' for='IsSalaryCb'></label>").HtmlAttributes(new { style = "text-align:center" }).Width(90).MinScreenWidth(1000);
            columns.Bound(p => p.TerminatedDate).Title("Terminated").Width(120).Format("{0:MM/dd/yyyy}").MinScreenWidth(1500);
            columns.Bound(p => p.CreatedDate).Title("Created").Width(100).Format("{0:MM/dd/yyyy}").MinScreenWidth(1600);
            columns.Bound(p => p.CreatorName).Title("Created By").MinScreenWidth(1700);
        })
        .Filterable(filterable => filterable
            .Operators(operators => operators
                .ForString(str => str.Clear()
                .Contains(ErrorResources.FilterContains)
                .StartsWith(ErrorResources.FilterStartsWith)
                .EndsWith(ErrorResources.FilterEndsWith)
                .IsEqualTo(ErrorResources.FilterEqual)
                .IsNotEqualTo(ErrorResources.FilterNotEqual))))
        .Sortable()
        .Events(e => e.FilterMenuInit("removeAutoCompleate"))
        .Pageable(config => {
            config.PageSizes(true);
        })
)

 

Function (in javascript):

<script type="text/javascript">
function removeAutoCompleate(e) {
    $("input").each(function (index) {
        $(this).attr('autocomplete', "off")
    });
}
</script>

 

A global solution would have been nice as we use grids all over the place, however I am happy that we do have a viable solution anyways.

Thanks again Stefan!

Gram