Question

我在固定高度的容器中有一个Kendo UI MultiSelect（想想模态弹出窗口）。 MultiSelect的autoClose设置为false。

当用户选择多个项目（并且原始输入字段增长）时，MultiSelect列表似乎随机关闭。

重现的步骤：

加载http://dojo.telerik.com/aKeGu/4
开始选择MultiSelect中的每个项目，直到MultiSelect关闭

感谢任何见解。

感谢。

Answer 1

实际上它没有随机关闭，但是当“弹出”容器在垂直空间用完时开始滚动时它就会关闭。滚动事件导致下拉菜单关闭。如果在弹出窗口中设置overflow-y: none;，您将看到问题消失。

我认为解决这个问题的唯一方法是通过一种防止容器滚动的解决方法。显然，这会对你产生一些UI影响，所以你需要决定是通过CSS来做，还是使用会消耗scroll事件并取消它的javascript。

您可以在下拉列表中看到类似滚动问题的一些解决方案： http://docs.telerik.com/kendo-ui/controls/editors/dropdownlist/how-to/appearance/prevent-close-on-scroll

在这里：http://dojo.telerik.com/OJugu

并查看该主题：http://www.telerik.com/forums/scrolling-bug-causes-multiselect-dropdown-to-close-(with-dojo-example)

Answer 2

我确定了一个解决方案。似乎在滚动事件之前关闭了下拉列表。所以，我拦截滚动事件，取消它，然后重新打开下拉列表。

工作示例： http://dojo.telerik.com/aWAQu/6

解决方案：

$('.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();
    }
});

Kendo UI Multiselect过早关闭IE（dojo示例）

2 个答案: