1

I have a Kendo UI MultiSelect within a fixed height container (think modal pop-up). The MultiSelect has autoClose set to false.

As the user selects multiple items (and the origin input field grows) the MultiSelect list seems to randomly close.

Steps to reproduce:

Any insight is appreciated.

Thanks.

2 Answers2

0

Actually it is not closing randomly, but it is closing as soon as the "popup" container starts to scroll when it runs out of vertical space. The scrolling event is causing the dropdown to close. You will see that the problem goes away if you set overflow-y: none; on the popup.

I think the only way to resolve this for IE is through a workaround which prevents the container from scrolling. Obviously that will have some UI implications for you, so you need to decide whether to do it through CSS or use javascript that will consume the scroll event and cancel it.

You can see some solutions to similar scrolling problems on dropdown lists here: http://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/how-to/appearance/prevent-close-on-scroll

and here: http://dojo.telerik.com/OJugu

and also take a look at that thread: http://www.telerik.com/forums/scrolling-bug-causes-multiselect-dropdown-to-close-(with-dojo-example)

Oggy
  • 1,516
  • 1
  • 16
  • 22
  • Thanks, I went the scroll event handler route. It was a little different than these examples but the solution is similar. –  Apr 11 '17 at 16:24
0

I determined a solution. It seemed that the dropdown was being closed prior to the scroll event. So, I intercept the scroll event, cancel it, and re-open the drop down.

Working example: http://dojo.telerik.com/aWAQu/6

Solution:

$('.caregiver-window-fixed-height').on('scroll', function (e) {
    var $widget = $('#careGiverHelpTags').data("kendoMultiSelect");

    if (e.type == "scroll" && $widget.wrapper.hasClass('k-state-focused') && $widget.list.is(':visible')) {
        e.preventDefault();
        e.stopImmediatePropagation();
        $widget.open();
    }
});