In my web application I have a jQuery UI dialog window that uses Kendo UI DropDownTree control.
I want to be able to filter information in DropDownTree control. The problem is, that this functionality works properly only when modal option for jQuery UI dialog is set to false. As soon as I turn it on, filter on DropDownTree control becomes unclickable. It is also impossible to put focus on it.
I made a simple demo, please check it here: https://dojo.telerik.com/UwUvuDel.
Interesting part is that simple input controls works fine, and DropDownTree filtering works fine when modal=false. Sadly I need popup to be modal, as well as I need filtering work properly. And I would like to continue using jQuery UI dialog as at can be complicated to switch application from one implementation to another.
Does anyone have idea how to fix the problem. Are there any workarounds?
It seems that there is no easy workaround (Kendo support also confirmed it).
As it is said in Kendo documentation this is a known issue:
Some third-party modal popups prevent access to focusable elements, which are rendered outside the modal popup. Such widgets include the Bootstrap modal dialog, the jQuery UI modal dialog, and possibly others. The Kendo UI widgets, which are affected by this behavior are all widgets, which render their own detached popups, e.g. AutoComplete, ColorPicker, ComboBox, DropDownList, DateTimePicker, Editor, Grid, and MultiSelect. The popups of these Kendo UI widgets are rendered as children of the and as a result, the third-party modal popup will prevent access to them.
Possible solutions:
1). Disable the modal popup's modality, so that elements outside it can be focused.
2). Use a modal Kendo UI Window instead of a third-party popup.
Sadly I have to switch application from jQuery UI dialog to Kendo Window control - as you can see in a demo it really works...