Problem with Select2 and inline editing - possible bug?

simoncun

Hi,

I've a problem with the Select2 plugin and inline editing. If I click the cell it shows the Select2 box with the search box focused as expected. However, if I click on the search box (or on any white space that isn't an option in the select) the datatables cell loses focus, the Select2 dropdown remains visible. Clicking on white space below the dropdown doesn't remove it and choosing an option doesn't update datatables.

I can't link to a live version right now but I've uploaded screenshots of a basic example, imgur.com/a/XHcYG.

I'm using the latest version of datatables, editor and 4.0.1 (and later) of Select2. I've stripped out all styles except of the base editor style and the Select2 style but hopefully you'll get the idea.

kthorngren

I see the same issue unless I enable multiple: true in the Select2 opts.

Kevin

simoncun

Yes but it leads to more problems, e.g. deleting one of the multiple options leads to the same issue or clicking on white space below the dropdown just leaves it open. Is Select2 workable or is Selectize better?

kthorngren

Yes but it leads to more problems, e.g. deleting one of the multiple options leads to the same issue

I hadn't noticed that before but I can recreate that issue. My project is still in development and has not had much testing :-)

Hopefully its an easy fix.

Kevin

simoncun

I scrapped Select2 and went with Selectize with a plugin from their git that makes it work the same. https://github.com/selectize/selectize.js/pull/776/files

martin@mp-networks.net

Found a solution for this.

https://github.com/select2/select2/issues/1246

if ($.ui && $.ui.dialog && $.ui.dialog.prototype._allowInteraction) {
var ui_dialog_interaction = $.ui.dialog.prototype._allowInteraction;
$.ui.dialog.prototype._allowInteraction = function(e) {
if ($(e.target).closest('.select2-dropdown').length) return true;
return ui_dialog_interaction.apply(this, arguments);
};
}