Created by: dana-shalev
A modal dialog does not enable any element which is not a descendant of the dialog to recieve focus. This makes a lot of sense, of course but it also creates undesriable behavior in extreme cases where controls have elements which are direct descendants of the body element. For example, drop down elements are usually descendants of the body element and therefore does not behave nicely inside dialogs.
Related issues (drop down inside bootstrap modal dialog does not recieve focus):
- Bootstrap: https://github.com/twbs/bootstrap/issues/6996
- Select2: https://github.com/ivaynberg/select2/issues/600
- ckEditor: http://dev.ckeditor.com/ticket/9934
I found many discussions on this issue and no final solution. However, I did find that the same problem existed in JQuery dialog and it solution (described here: https://github.com/ivaynberg/select2/issues/1246).
The idea is that the dialog exposes a method which enables the client to specify whether the element can recieve focus or not.
My change does exactly that: added an allowFocus method which is called from the enforceFocus method. If allowFocus returns true focus will not be enforced by the dialog.
The usage for enabling select2 dropdown to recieve focus is as follows:
$.fn.modal.Constructor.prototype.allowFocus = function (e) {
return !!$(e.target).closest('.select2-drop');
};