Today in the project to encounter a Select2 plugin in the jquery UI Dialog cannot focus to the search box problem, later added in the JS code (location can be selected, I choose the location is select2.min.js behind, because many places are used, Do not modify for a single function):
$.ui.dialog.prototype._allowinteraction = function (e) {return!! $ (e.target). Closest ('. Ui-dialog,. Ui-datepicker,. Select2-drop '). length;};
This problem occurs because:
The reason the dropdown is appended to the body and is the last element was so, it may overlay the dialog when the CH Oice box is taller then the dialog instead of scrolling inside it.
Initially Select2 did append the dropdown to the container instead of body, but the afore mentioned problem with dialogs I s what prompted me to refactor it to append to body in the first place. So far this proved to is a solution with the least amount of problems.
Unfortunately its is not a perfect solution, not when the dialogs is built with these weird restrictions in place.
The reason for this is from: https://github.com/ivaynberg/select2/issues/1246
This article is from "Happy Chickadee" blog, make sure to keep this source http://1723824.blog.51cto.com/1713824/1439095