select2 plugin works fine when not inside a jquery modal dialog

jstuardo's link is good, but there's a lot to sift through on that page. Here's the code you need:

$.ui.dialog.prototype._allowInteraction = function(e) {
    return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-drop').length;
};

Just add it next to wherever you are setting the select2 drop down.

Or try this from: Select2 doesn't work when embedded in a bootstrap modal

Remove tabindex="-1" from the modal div

An easy way:

$.ui.dialog.prototype._allowInteraction = function (e) {
    return true;
};

add this after whereever you set select2

Related