Select2 no funciona cuando está incrustado en un modo de arranque

Cuando uso un select2 (input) en el modo de arranque, no puedo escribir nada en él. Es como deshabilitado? Fuera del modal select2 funciona bien.

Ejemplo de trabajo: http://jsfiddle.net/byJy8/1/ code:

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
  <div class="modal-body" style="max-height: 800px">


<form class="form-horizontal">

<!-- Text input-->
<div class="control-group">
  <label class="control-label" for="vdn_number">Numer</label>
  <div class="controls">
     <!-- seleect2 -->
    <input name="vdn_number" type="hidden" id="vdn_number"  class="input-large" required=""  />
  </div>
</div>

  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

y js:

$("#vdn_number").select2({
    placeholder: "00000",
    minimumInputLength: 2,
    ajax: {
        url: "getAjaxData/",
        dataType: 'json',
        type: "POST",
        data: function (term, page) {
            return {
                q: term, // search term
                col: 'vdn'
            };
        },
        results: function (data) { // parse the results into the format expected by Select2.
            // since we are using custom formatting functions we do not need to alter remote JSON data
            return {results: data};
        }
    }
});

respuestas:

aquí puedes encontrar una solución rápida

y aquí está "la forma correcta": Select2 no funciona cuando está incrustado en un modo de arranque

Ok, lo tengo para trabajar.

cambio

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
  <div class="modal-body" style="max-height: 800px">

a

<div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Panel</h3>
  </div>
  <div class="modal-body" style="max-height: 800px">

(eliminar tabindex = "- 1" de modal)

Para Select2 v4:

Use dropdownParentpara adjuntar el menú desplegable al cuadro de diálogo modal, en lugar del cuerpo HTML.

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <select id="select2insidemodal" multiple="multiple">
          <option value="AL">Alabama</option>
            ...
          <option value="WY">Wyoming</option>
        </select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


<script>

$(document).ready(function() {
  $("#select2insidemodal").select2({
    dropdownParent: $("#myModal")
  });
});

</script>

Esto adjuntará el menú desplegable Select2 para que caiga dentro del DOM del modal en lugar del cuerpo HTML (el valor predeterminado). Ver https://select2.org/dropdown#dropdown-placement

Encontré una solución a esto en github para select2

https://github.com/ivaynberg/select2/issues/1436

Para bootstrap 3, la solución es:

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

Bootstrap 4 renombró el enforceFocusmétodo a _enforceFocus, por lo que deberá parchear eso en su lugar:

$.fn.modal.Constructor.prototype._enforceFocus = function() {};

Explicación copiada del enlace de arriba:

Bootstrap registra un oyente para el evento focusin que verifica si el elemento enfocado es la superposición en sí o un descendiente del mismo; de lo contrario, solo se vuelve a enfocar en la superposición. Con el menú desplegable select2 adjunto al cuerpo, esto evita que ingrese cualquier cosa en el campo de texto.

Puede corregir esto rápidamente sobrescribiendo la función enforceFocus que registra el evento en el modal

Simplemente elimine tabindex="-1"y agregue estilooverflow:hidden

Aquí hay un ejemplo:

<div id="myModal" class="modal fade" role="dialog" style="overflow:hidden;">
    <!---content modal here -->
</div>

.select2-close-mask{
    z-index: 2099;
}
.select2-dropdown{
    z-index: 3051;
}

Esta es mi solución con select2 4.0.0. Simplemente anule el CSS justo debajo de la importación select2.css. Asegúrese de que el índice z sea mayor que su diálogo o modal. Acabo de agregar 2000 en los predeterminados. Porque el índice z de mis cuadros de diálogo es de aproximadamente 1000.

Establecer el menú desplegable Tuve que configurarlo en .modal-content dentro del modal o el texto terminaría centrado.

$("#product_id").select2({
    dropdownParent: $('#myModal .modal-content')
});

La respuesta que funcionó para mí se encuentra aquí: https://github.com/select2/select2-bootstrap-theme/issues/41

$('select').select2({
    dropdownParent: $('#my_amazing_modal')
});

Tampoco requiere eliminar el tabindex.

Según la documentación oficial de select2, este problema se produce porque los modales de Bootstrap tienden a robar el foco de otros elementos fuera del modal.

Por defecto, Select2 adjunta el menú desplegable al elemento y se considera "fuera del modal".

En su lugar, adjunte el menú desplegable al modal en sí con la configuración desplegable Padres:

$('#myModal').select2({
   dropdownParent: $('#myModal')
});

Ver referencia: https://select2.org/troubleshooting/common-problems

Tuve el mismo problema, actualizar z-indexpara .select2-containerdebería hacer el truco. Asegúrese de que su modal z-indexsea ​​más bajo que select2.

.select2-container {
    z-index: 99999;
}

Actualizado: en caso de que el código anterior no funcione correctamente, también elimine los índices de tabulación de su modal como sugirió @breq

Simplemente use este código en Document.read ()

$.fn.modal.Constructor.prototype.enforceFocus = function () {};

Este problema no funcionaba para mí Función Jquery simple

$('#myModal .select2').each(function() {  
   var $p = $(this).parent(); 
   $(this).select2({  
     dropdownParent: $p  
   });  
});

cambiar el archivo select2.css

z-index: 9998;
...
z-index: 9999;
...
z-index: 10000;

a

z-index: 10000;
...
z-index: 10001;
...
z-index: 10002;

Solo para comprender mejor cómo funcionan los elementos tabindex para completar la respuesta aceptada:

El atributo global tabindex es un número entero que indica si el elemento puede tomar el foco de entrada (es enfocable), si debería participar en la navegación secuencial del teclado y, de ser así, en qué posición. Puede tomar varios valores:
  -un valor negativo significa que el elemento debe ser enfocable, pero no debe ser accesible a través de la navegación secuencial del teclado;
  -0 significa que el elemento debe ser enfocable y accesible a través de la navegación secuencial del teclado, pero su orden relativo está definido por la convención de la plataforma;
  -un medio de valor positivo debe ser enfocable y accesible a través de la navegación secuencial del teclado; su orden relativo se define por el valor del atributo: el secuencial sigue el número creciente del índice de tabulación. Si varios elementos comparten el mismo índice de tabulación, su orden relativo sigue su posición relativa en el documento.

de: Red Mozilla Devlopper

Si tiene un problema con el teclado del iPad que oculta el modo de arranque al hacer clic en la entrada select2 , puede resolver esto agregando la siguiente regla después de la inicialización de la select2entrada:

if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
   var styleEl = document.createElement('style'), styleSheet;
   document.head.appendChild(styleEl);
   styleSheet = styleEl.sheet;
   styleSheet.insertRule(".modal { position:absolute; bottom:auto; }", 0);
   document.body.scrollTop = 0; // Only for Safari
}

Tomado de https://github.com/angular-ui/bootstrap/issues/1812#issuecomment-135119475

EDITAR: si sus opciones no se muestran correctamente, debe usar el dropdownParentatributo al inicializar select2:

$(".select2").select2({
    dropdownParent: $("#YOURMODALID")
});

Buena suerte (:

Basado en la respuesta de @pymarco, escribí esta solución, no es perfecta, pero resuelve el problema de enfoque select2 y mantiene la secuencia de pestañas trabajando dentro del modal

    $.fn.modal.Constructor.prototype.enforceFocus = function () {
        $(document)
        .off('focusin.bs.modal') // guard against infinite focus loop
        .on('focusin.bs.modal', $.proxy(function (e) {
            if (this.$element[0] !== e.target && !this.$element.has(e.target).length && !$(e.target).closest('.select2-dropdown').length) {
                this.$element.trigger('focus')
            }
        }, this))
    }

En mi caso tuve el mismo problema con dos modales y todo se resolvió usando:

$('.select2').each(function() { 
    $(this).select2({ dropdownParent: $(this).parent()});
})

Como en el problema del proyecto # 41, dijo un usuario.

$("#IlceId").select2({
    allowClear: true,
    multiple: false,
    dropdownParent: $("#IlceId").parent(),
    escapeMarkup: function (m) {
        return m;
    },
});

Este código está funcionando. Gracias.

Bien, sé que llego tarde a la fiesta. Pero déjame compartir contigo lo que funcionó para mí. Las soluciones tabindex y z-index no me funcionaron.

La configuración del elemento primario del elemento select funcionó según los problemas comunes enumerados en el sitio select2.

Si usa jquery mobile popup, debe reescribir la función _handleDocumentFocusIn:

$.mobile.popup.prototype._handleDocumentFocusIn = function(e) {
  if ($(e.target).closest('.select2-dropdown').length) return true;
}

Tengo el mismo problema con el select2in bootstrap modal, y la solución fue eliminar el overflow-y: auto;y overflow: hidden; desde .modal-openy.modal classes

Aquí está el ejemplo del uso jQuerypara eliminar el overflow-y:

$('.modal').css('overflow-y','visible');
$('.modal').css('overflow','visible');

tuve este problema antes, estoy usando yii2 y lo resolví de esta manera

$.fn.modal.Constructor.prototype.enforceFocus = $.noop;

Tuve un problema semi relacionado en una aplicación, así que pondré mi 2c.

Tengo múltiples modales con formularios que contienen widgets select2. Abrir el modal A, luego otro modal dentro del modal A, provocaría que los widgets select2 dentro del modal B desaparezcan y no se inicialicen.

Cada uno de estos modales estaba cargando los formularios a través de ajax.

La solución fue eliminar los formularios del dom al cerrar un modal.

$(document).on('hidden.bs.modal', '.modal', function(e) {
    // make sure we don't leave any select2 widgets around 
    $(this).find('.my-form').remove();
});

$('.modal').on('shown.bs.modal', function (e) {
    $(this).find('.select2me').select2({
        dropdownParent: $(this).find('.modal-content')
    });
})

select2Resolví esto en general en mi proyecto sobrecargando la función. Ahora comprobará si no hay dropdownParent y si se llama a la función en un elemento que tiene un padre del tipodiv.modal . Si es así, agregará ese modal como padre para el menú desplegable.

De esta manera, no tiene que especificarlo cada vez que crea un cuadro de entrada select2.

(function(){
    var oldSelect2 = jQuery.fn.select2;
    jQuery.fn.select2 = function() {
        const modalParent = jQuery(this).parents('div.modal').first();
        if (arguments.length === 0 && modalParent.length > 0) {
            arguments = [{dropdownParent: modalParent}];
        } else if (arguments.length === 1
                    && typeof arguments[0] === 'object'
                    && typeof arguments[0].dropdownParent === 'undefined'
                    && modalParent.length > 0) {
            arguments[0].dropdownParent = modalParent;
        }
        return oldSelect2.apply(this,arguments);
    };
    // Copy all properties of the old function to the new
    for (var key in oldSelect2) {
        jQuery.fn.select2[key] = oldSelect2[key];
    }
})();

Simplemente lo hago funcionar incluyendo select2.min.css

Pruébalo

Mi html modal de bootstrap 3 es

<div id="changeTransportUserRequestPopup" class="modal fade" role="dialog">
    <div class="modal-dialog" style="width: 40%!important; ">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3>Warning</h3>
            </div>
            <div class="modal-body" id="changeTransportUserRequestPopupBody">
                <select id="cbTransport" class="js-example-basic-single" name="cbTransport" style="width:100%!important;"></select>
            </div>
            <div class="modal-footer">
                <button id="noPost" class="btn btn-default" name="postConfirm" value="false" data-dismiss="modal">Cancel</button>
                <button type="submit" id="yesChangeTransportPost" class="btn btn-success" name="yesChangeTransportPost" value="true" data-dismiss="modal">Yes</button>
            </div>
        </div>
    </div>
</div>

puede llamar al disparador select2 nuevamente dentro de su $ (documento)

$(".select2").select2({ 
                width: '120' 
            });

para usar bootstrap 4.0 con el lado del servidor (datos en línea ajax o json), debe agregar todo esto:

$.fn.modal.Constructor.prototype._enforceFocus = function() {};

y luego, cuando modal esté abierto, cree select2:

  // when modal is open
  $('.modal').on('shown.bs.modal', function () {
            $('select').select2({
                  // ....
            });
  });

En mi caso hice esto y funciona. Uso el paquete para cargarlo y en este caso funcionó para mí

 $(document).on('select2:select', '#Id_Producto', function (evt) {
   // Here your code...
  });