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

Intenta interpretar el código correctamente previamente a adaptarlo a tu trabajo si ttienes algo que aportar puedes decirlo en los comentarios.

Solución:

Ok, lo tengo para trabajar.

cambiar

  

    ×
    
Panel
  
  

para

  

    ×
    
Panel
  
  

(retirar tabindex=”-1″ de modal)

Para Select2 v4:

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

  

    

      

        ×
        
Modal title
      
      

        
          Alabama
            ...
          Wyoming
        
      
      

        Close
        Save changes
      
    
  

Esto adjuntará el menú desplegable Select2 para que se encuentre dentro del DOM del modal en lugar del cuerpo HTML (el valor predeterminado). Consulte 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 enforceFocus método para _enforceFocuspor lo que deberá parchear eso en su lugar:

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

Explicación copiada del enlace anterior:

Bootstrap registra un oyente para el evento focusin que verifica si el elemento enfocado es la superposición en sí o un descendiente de ella; si no, simplemente vuelve a enfocarse en la superposición. Con el menú desplegable select2 adjunto al cuerpo, esto le impide ingresar cualquier cosa en el campo de texto.

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

Si piensas que te ha sido útil este post, te agradeceríamos que lo compartas con el resto juniors así contrubuyes a difundir nuestro contenido.

---

---

Utiliza Nuestro Buscador