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

Cuando uso un select2 (entrada) en el modo bootstrap, no puedo escribir nada en él. ¿Es como deshabilitado? Fuera de modal modal2 funciona bien.

enter image description here

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

  

adn 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á ‘el camino correcto’: Select2 no funciona cuando está integrado en un modal de arranque

Ok, tengo que funcionar.

cambio

  

a

  

(eliminar tabindex = “- 1” de modal)

Para Select2 v4:

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

    

Esto adjuntará el menú desplegable Select2 para que quede dentro del DOM del modal en lugar de en el cuerpo HTML (el valor predeterminado). Ver https://select2.github.io/options-old.html#dropdownParent

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

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

La solucion es:

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

Explicación copiada del enlace de arriba:

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

Puede solucionar esto sobrescribiendo la función enforceFocus que registra el evento en el modal

Simplemente elimine tabindex="-1" y agregue overflow:hidden estilo overflow:hidden

Aquí hay un ejemplo:

  
 .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. Solo agrego 2000 en los predeterminados. Porque el índice z de mis diálogos es de aproximadamente 1000.

cambiar el archivo select2.css

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

a

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

Tuve el mismo problema, actualizar z-index para .select2-container debería ser el truco. Asegúrate de que el z-index tu modal sea menor que select2.

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

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

Jus usa este código en Document.read ()

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

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

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

Además, no es necesario eliminar el tabindex .

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

El atributo global de tabindex es un número entero que indica si el elemento puede tomar el foco de entrada (es enfocable), si debe 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 poder accederse mediante la navegación secuencial con el teclado;
-0 significa que el elemento debe ser enfocable y alcanzable mediante la navegación secuencial con el teclado, pero su orden relativo está definido por la convención de la plataforma;
-un valor positivo significa que debe ser enfocable y accesible a través de la navegación secuencial con el teclado; su orden relativo se define por el valor del atributo: la secuencia sigue al número creciente del tabindex. Si varios elementos comparten el mismo tabindex, su orden relativo sigue su posición relativa en el documento.

de: Mozilla Devlopper Network

Basado en la respuesta de @pymarco escribí esta solución, no es perfecta, pero resuelve el problema del foco select2 y mantiene la secuencia de tabs 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)) } 

Si utiliza jquery mobile popup, debe volver a escribir la función _handleDocumentFocusIn:

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

Si tiene un problema con el teclado del iPad que oculta el modo de rutina de arranque mientras hace clic en la entrada select2 , puede resolverlo agregando la siguiente regla después de la inicialización de la entrada select2 :

 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

EDIT: si tus opciones no se muestran correctamente, necesitas usar el atributo dropdownParent al inicializar select2 :

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

Buena suerte (:

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

Establecer el elemento primario del elemento seleccionado funcionó según los problemas comunes enumerados en el sitio select2.

Tengo el mismo problema con select2 en el modo bootstrap modal , y la solución fue eliminar el overflow-y: auto; y overflow: hidden ; de las .modal-open y .modal classes

Aquí está el ejemplo de usar jQuery para 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; 
 $("#IlceId").select2({ allowClear: true, multiple: false, dropdownParent: $("#IlceId").parent(), escapeMarkup: function (m) { return m; }, }); 

este código está funcionando. Gracias.

Simplemente lo hago funcionar incluyendo select2.min.css

Pruebe iy

Mi html modal de bootstrap 3 es