select2 plugin works fine when not inside a jquery modal dialog

Question

I am using select2 plugin inside a jquery dialog but in does not work. When dropping down, the focus moves to the input control but immediately get out from it,not allowing me to type anything.

This is the HTML:

<div id="asignar_servicio" title="Asignar servicios a usuarios">
    <input type="hidden" class="bigdrop" id="a_per_id" />
</div>

And this is the javascript code:

        $( "#asignar_servicio" ).dialog({
            autoOpen: false,
            height: 500,
            width: 450,
            modal: true,
            buttons: {
                "Cancelar": function () {
                    $('#asignar_servicio').dialog('close');
                }
            }
        });
        $("#a_per_id").select2({
            placeholder: "Busque un funcionario",
            width: 400,
            minimumInputLength: 4,
            ajax: {
                url: "@Url.Action("Search", "Personal")",
                dataType: 'json',
                data: function (term, page) {
                    return {
                        q: term,
                        page_limit: 10,
                    };
                },
                results: function (data, page) {
                    return { results: data.results };
                }
            }
        }).on("change", function (e) {
            var texto = $('lista_personal_text').val().replace(/ /g, '');
            if (texto != '')
                texto += ',';
            texto += e.added.text;

            var ids = $('lista_personal_id').val().replace(/ /g, '');
            if (ids != '')
                ids += ',';
            ids += e.added.id;
        });

I have this same code in other page and it works.

Any help will be appreciated,

thanks Jaime

Shick

Answer 1

I have found this workaround. https://github.com/ivaynberg/select2/issues/1246

Cheers Jame

Shick

That link has a lot of different proposed solutions/workarounds. Hard to decipher what's the best solution amongst all of them. (No up voting like on SO). Could you share what specifically worked for you? – Remscheid

None of those solutions worked for me. Can you tell me which one you tried out [or in combination with] worked? – Modulation

Answer 2

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.

Remscheid

In more recent versions of select2 (I tested on 4.0.3), replace '.select2-drop' with '.select2-dropdown' – Cavil

Answer 3

An easy way:

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

add this after whereever you set select2

Trustless

Answer 4

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

Remove tabindex="-1" from the modal div

Thaumaturgy

Answer 5

The best solution I found was just making the dialog not be a modal dialog by removing modal:true. Once you do this the page will function as desired.

After a while of battling with this I found another option that allows you to keep the dialog as a modal. If you modify the css for select2 to something like the following:

 .select2-drop {
    z-index: 1013;
}

.select2-results {
    z-index: 999;
}

.select2-result {
    z-index: 1010;
}

keep in mind that this works however if you open a lot of dialogs on the same page it will eventually exceed the z-index specified, however in my use case these numbers got the job done.

Coarse

Answer 6

There's a new version of the fix for select2 4.0 from the github issue thread about this problem:

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);
    };
}

Just run this before any modal dialogs that will have select2 in them are created.

JSFiddle of this fix in action

Dolerite

Answer 7

Not enough reputation to comment on a previous post, but I wanted to add this bit of code:

 $('#dialogDiv').dialog({
                title: "Create Dialog",
                height: 410,
                width: 530,
                resizable: false,
                draggable: false,
                closeOnEscape: false,
                //in order for select2 search to work "modal: true" cannot be present. 
                //modal: true,
                position: "center",
                open: function () { },
                close: function () { $(this).dialog("distroy").remove(); }
            });
$("#displaySelectTwo")select2();

Updating to the newer version of JQuery and Select2 is not an option in our application at this time. (using JQueryUI v1.8 and Select2 v1)

Overhead

Answer 8

Add this after your select2() declaration.

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

Retuse

Answer 9

I've used the following fix with success:

$.fn.modal.Constructor.prototype.enforceFocus = function () {
        var that = this;
        $(document).on('focusin.modal', function (e) {
            if ($(e.target).hasClass('select2-input')) {
                return true;
            }

            if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
                that.$element.focus();
            }
        });
    }

Karyokinesis

Answer 10

I could fix this by removing the option: 'modal: true' from the dialog options.
It worked fine.

Ralli

Answer 11

For anyone stumpling upon this with Select2 v4.0.12

I was using the Select2 option dropdownParent

i set the dropDownParent value, and still had the issue.

dropdownParent: $("#ReportFilterDialog")

What fixed it for me, was setting the value to, to select the outer layer of the modal dialog:

dropdownParent: $("#ReportFilterDialog").parent()

Zachary