Reputation: 4405

select2 plugin works fine when not inside a jquery modal dialog

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

Upvotes: 18

Answers (11)

Saku

Reputation: 47

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()

Upvotes: 0

AliBoronsi

Reputation: 764

An easy way:

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

add this after whereever you set select2

Upvotes: 10

abuss

Reputation: 419

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.

Upvotes: 2

Gabby J. Paolucci

Reputation: 927

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

Upvotes: 2

Tariq

Reputation: 2871

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

Upvotes: 0

Safiya P

Reputation: 21

Add this after your select2() declaration.

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

Upvotes: 1

THammons

Reputation: 53

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)

Upvotes: 1

d.grassi84

Reputation: 393

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

Upvotes: 0

Umair

Reputation: 5481

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

Remove tabindex="-1" from the modal div

Upvotes: 5

Jeremy Knight

Reputation: 604

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.

Upvotes: 25

jstuardo

Reputation: 4405

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

Cheers Jame

Upvotes: 3

select2 plugin works fine when not inside a jquery modal dialog

Answers (11)

Related Questions