Dropdown List Closes When Pressing Spacebar When Filtering

[Jason]

Hello,

We are currently using the Kendo DropDownList on our site using the FilterType.Contains filtering.  Here is an example of how we have one of our dropdowns set up currently:

@(Html.Kendo().DropDownListFor(c => c.Explant.FacilityId)
                        .OptionLabel("-- Select a Facility --")
                        .HtmlAttributes(new { style = "width:40%", id = "facilityDropdown", @class = "dropdown" })
                        .BindTo(Model.Facilities.OrderBy(c => c.Name))
                        .DataTextField("Name")
                        .DataValueField("Id")
                        .Filter(FilterType.Contains))

The issue is, the user is able to open up the dropdown just fine by pressing the spacebar, however when they are typing into the filter textbox in the dropdown and try to click the spacebar to add another word to the filter, the space is applied to the filter textbox, but the dropdown closes automatically.  This can be very annoying to our users who are trying to filter the results of the dropdown list with it.  I've tried searching through your site and forums as to why this behavior might be occurring, but the closest thread I found about it is this one from two years ago: https://www.telerik.com/forums/bug-dropdownlist-in-r3-2017-dropdown-gets-closed-when-space-is-hit-in-the-filter-textbox. 

I'm unsure if this is a bug with the dropdownlist, or if it's something on our end, but does anyone have any suggestions on a workaround for this bug?  We've attempted some Javascript to try to prevent its behavior, but we haven't been able to get that working either:

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 className = target.className;
                console.log((tagName === "INPUT" && e.keyCode == 32 && className == "k-textbox"))
                if (tagName === "INPUT" && e.keyCode == 32 && className == "k-textbox") {
                    return;
                }
            }

 

If anyone is able to provide any helpful insight into this issue, that would be greatly appreciated.

Thanks,

Jason

[Veselin Tsvetanov]

Hello Jason,

Attached you will find a small sample based on the DropDownList declaration sent. You will notice that it does not close its pop-up upon space. May I ask you to modify the attached, so it reproduces the issue observed at your end and send it back to us?

Regards,
Veselin Tsvetanov
Progress Telerik