Заблокированный фильтр Kendo UI DropDownTree в модальном диалоговом окне jQuery UI

Question

В моем веб-приложении у меня есть диалоговое окно jQuery UI, которое использует Kendo UI DropDownTree .

Я хочу иметь возможность фильтровать информацию в элементе управления DropDownTree. Проблема заключается в том, что эта функция работает правильно, только если для опции модальный для диалогового окна пользовательского интерфейса jQuery установлено значение false . Как только я включаю его, фильтр на элементе управления DropDownTree становится неактивным. Также невозможно сфокусироваться на этом.

Я сделал простую демонстрацию, пожалуйста, проверьте ее здесь: https://dojo.telerik.com/UwUvuDel.

Интересно то, что простые элементы управления вводом работают нормально, а фильтрация DropDownTree работает нормально, когда modal = false . К сожалению, мне нужно, чтобы всплывающее окно было модальным, а также мне нужно правильно фильтровать работу. И я хотел бы продолжить использование диалогового окна jQuery UI, поскольку может быть сложно переключать приложения из одной реализации в другую.

Кто-нибудь знает, как решить проблему. Есть ли обходные пути?

Answer 1

Кажется, что нет простого обходного пути (поддержка Kendo также подтвердила это).

Как сказано в Документация Kendo это известная проблема:

Некоторые модальные всплывающие окна сторонних производителей препятствуют доступу к фокусируемым элементам, которые отображаются вне модального всплывающего окна. Такие виджеты включают в себя Модальное диалоговое окно начальной загрузки, модальное диалоговое окно пользовательского интерфейса jQuery и, возможно, другие. Виджеты интерфейса пользователя Kendo, на которые влияет это поведение, все виджеты, которые отображают свои отдельные всплывающие окна, например Автозаполнение, ColorPicker, ComboBox, DropDownList, DateTimePicker, Редактор, Сетка и MultiSelect. Всплывающие окна этих виджетов Kendo UI предоставляются как дети и, как следствие, стороннее модальное всплывающее окно не позволит получить к ним доступ.

Возможные решения:

1). Отключите модальность модального всплывающего окна, чтобы элементы вне него могли быть сфокусированы.

2). Используйте модальное окно интерфейса Kendo вместо стороннего всплывающего окна.

К сожалению, мне нужно переключить приложение из диалогового окна jQuery UI в элемент управления Kendo Window - как вы можете видеть в demo , оно действительно работает ...