Kendo dropdown list clear filter not working in Edge/IE

Question

This is a working example you can take

<input type="text" id="ddl" />
<button>Change value</button>
<script>
  var ddl = $("#ddl").kendoDropDownList({
    dataTextField: "name",
    dataValueField: "id",
    filter: "contains",
    dataSource: {
    data: [
    {id: 1, name: "apples"},
    {id: 2, name: "oranges"},
    {id: 3, name: "apples2"},
    {id: 4, name: "oranges2"}]
    }
  }).data("kendoDropDownList");

   $("button").on("click", function(){
     ddl.dataSource.filter("")
     ddl.value(2);
   });
</script>

http://dojo.telerik.com/@plazarov/EmAni

Click on the dropdown list and filter it in Edge

Now clear the filter by selecting 'x' mark on the input text field. The filter wont get cleared.

Is it a bug in Kendo control?

Answer 1

You could argue it's a Kendo bug yes, see their example which suffers the same problem (in IE/Edge): http://demos.telerik.com/kendo-ui/dropdownlist/serverfiltering

But you could also argue that it's the browser poking it's nose in and adding this "clear" button to the input field. You can suppress it with simple CSS: (credit to Remove IE10's "clear field" X button on certain inputs?)

.someinput::-ms-clear {
  display: none;
}

See working example here: http://dojo.telerik.com/oguYo

Interestingly the Kendo styles suppress this too instead of making it work with the widgets, I found 2 uses of it in the common CSS just at a glance:

.k-widget ::-ms-clear{width:0;height:0}

.k-multiselect-wrap .k-input::-ms-clear{display:none}

Presumably they missed this instance though, good spot!