DropDownList on on tab with filtering

[Bradley]

Hello,

 

I'm running into an issue where I cannot filter items in a DropDownList when I tab onto it when .Filter is enabled.  When I tab onto the DropDownList I can cycle through items just fine with the arrow keys.

 

I'm aware of ALT + Down arrow to open up the DropDownList, and that works just fine, but I find that it is more intuitive to start typing once it has been selected, especially when filling out a form. I was wondering if it is possible to have the DropDownList open when it has been selected with Tab, or if there is a way to remap the shortcut.

[Joana]

Hi Bradley,

I would suggest that you attach focus handler to the DropDownList wrapper and use its open API method. The easiest approach would be to have some delay for the open execution in order to avoid flickering in standard click scenario. Otherwise, some override of the DropDownList code would be necessary to detach the standard click functionality.  The code should look something as follows:

$(document).ready(function () {
   var ddl= $("#id").data("kendoDropDownList");

   ddl.wrapper.on("focus", function (e) {
      setTimeout(function () {
         ddl.open();
      },100)
   });
});

Let me know if this solution would work in your scenario.

Regards,
Joana
Progress Telerik

[Bradley]

Hello,

Sorry for the late response. We ended up going with a different solution, albeit a bit more of a work around. The dropdown would open on a spacebar click. This

 

kendo.ui.DropDownList.prototype._keydown = function (e) {
            var keyCode = e.keyCode || e.which;
            if (keyCode == kendo.keys.SPACEBAR && this.filterInput[0] === document.activeElement) {
                return; // Prevent the dropdown from closing when the user presses the spacebar in the filter textbox.
            }
            keyDown.call(this, e);
        }



        $(function () {
            window.onkeydown = function (e) {
                e = e || window.event; // Normalize the event for IE
                var target = e.srcElement || e.target; // Get the element that the event was triggered on
                var tagName = target.tagName; // Get the tag name of the element
                var keyCode = e.keyCode || e.which;
                return !(tagName === "SPAN" && keyCode == 32); // Prevent screen from scrolling when spacebar is hit when  focusing on a dropdown.
            }
        });

[Joana]

Hello Bradley,

Thank you for sharing your solution.

Overriding the keydown function of the DropDownList seems like a good approach in this use case.

Regards,
Joana
Progress Telerik