I know issue with jQueryUI modal window and Select2. I’m using this fix https://github.com/select2/select2/issues/1246#issuecomment-71710835. But currently I’m trying to integrate Select2 with jqGrid and its edit modal window and I noticed that input field loosing focus on keydown and no text is entered. I’m using latest build of Select2 v4.0.0.

1. Clicked on select2 – list opened and input has focus
https://cloud.githubusercontent.com/assets/541588/7607394/423db048-f961-11e4-9de0-d67b4b485b2e.png

2. Started to search text (keydown) – input looses focus and no text appears
https://cloud.githubusercontent.com/assets/541588/7607412/6ada9016-f961-11e4-8587-2ed0155a9f7e.png

3. Strange, but on the same modal window, when Select2 is multiple type, it’s working fine:
https://cloud.githubusercontent.com/assets/541588/7607446/a9cc8d24-f961-11e4-96fc-526401624e87.png

4. Select2 is created on jqGrid dataInit event:
dataInit: function (elem) {
$(elem).css({ width: “500px” }).select2({
data: StacjeDlaIdZamPoc,
allowClear: false,
tags: false,
minimumInputLength: 0,
placeholder: “Wskaż stację”,
templateResult: function (repo) {
if (repo.loading) {
return repo.text;
}
return $(repo.text2);
},
templateSelection: function (repo) {
return $(repo.text2);
},
minimumResultsForSearch: 5
}).on(“select2:select”, function(event) {
var LWystapien = parseInt(event.params.data.LWystapien);
$(“#Wystapienie”).val(1);
$(“#LWystapien”).val(LWystapien);
if (LWystapien > 1) {
$(“#Wystapienie”).prop(“disabled”, false).spinner(“enable”);
} else {
$(“#Wystapienie”).prop(“disabled”, true).spinner(“disable”);
}
});
}
As I wrote above I’ve tried fix for jQueryUI modal:
if ($.ui && $.ui.dialog && $.ui.dialog.prototype._allowInteraction) {
var ui_dialog_interaction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function(e) {
console.log(e);
if ($( e.target ).closest(‘.select2-dropdown’).length) { return true; }
return ui_dialog_interaction.apply(this, arguments);
};
};

But this is not working on jqGrid modals.

It seems to work with Select2 full biuld and AttachContainer as shown in example http://jsbin.com/yisetuhuji/2/edit?html,js,output but as described here http://select2.github.io/options.html#dropdownParent I’ve noticed problems with oveflow: hidden 🙁