dialog - searching - select2 search field modal

El complemento select2 funciona bien cuando no está dentro de un diálogo modal de jQuery

Question

Estoy utilizando el complemento select2 dentro de un diálogo de jQuery pero no funciona. Al bajar, el enfoque se mueve hacia el control de entrada, pero de inmediato salga de él, no permitiéndome escribir nada.

Este es el HTML:

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

Y este es el código javascript:

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

Tengo este mismo código en otra página y funciona.

Cualquier ayuda será apreciada,

gracias Jaime

Answer 1

Agregue esto después de su declaración select2 ().

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

Answer 2

El enlace de jstuardo es bueno, pero hay mucho que analizar en esa página. Aquí está el código que necesitas:

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

Solo agréguelo junto a donde esté configurando el menú desplegable de Select2.

Answer 3

Hay una nueva versión de la solución para select2 4.0 del hilo de problemas de github sobre este problema :

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

Simplemente ejecute esto antes de que se creen los cuadros de diálogo modales que tendrán select2 en ellos.

JSFiddle de esta solución en acción

Answer 4

He encontrado esta solución. https://github.com/ivaynberg/select2/issues/1246

Saludos Jame

Answer 5

He utilizado la siguiente solución con éxito:

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

Answer 6

La mejor solución que encontré fue hacer que el diálogo no fuera un diálogo modal eliminando modal: true. Una vez hecho esto, la página funcionará como se desee.

Después de un tiempo de luchar con esto, encontré otra opción que te permite mantener el diálogo como modal. Si modifica el css para select2 a algo como lo siguiente:

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

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

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

tenga en cuenta que esto funciona, sin embargo, si abre muchos cuadros de diálogo en la misma página, eventualmente superará el índice z especificado, sin embargo, en mi caso de uso, estos números hicieron el trabajo.

Answer 7

No tengo suficiente reputación como para comentar en una publicación anterior, pero quería agregar este código:

 $(''#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();

Actualizar a la versión más reciente de JQuery y Select2 no es una opción en nuestra aplicación en este momento. (usando JQueryUI v1.8 y Select2 v1)

Answer 8

O intente esto desde: Select2 no funciona cuando está incrustado en un modo de rutina de carga

Quitar tabindex="-1" de la tabindex="-1" modal

Answer 9

Podría solucionar este problema eliminando la opción: ''modal: true'' de las opciones del diálogo.
Funcionó bien

Answer 10

Una forma fácil:

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

Agrega esto después de donde hayas seleccionado select2