17 jun 2020

// // 3 comentarios

Select2 no funciona correctamente en un modal de Bootstrap en Firefox

En la mayoria de los casos si se tiene un modal con select2 funciona correctamente, pero recientemente he podido notar que en un caso muy particular no funciona como debe ser, es decir no permite hacer una búsqueda dentro del control.

El inconveniente se presenta cuando el modal es mas grande que la ventana y se tiene que hacer scroll del modal, en ese caso no funciona el select2, esto solo sucede en Mozilla Firefox.


La solución a este inconveniente es muy sencilla, pero dificil de encontrar, basta con agregarle una opción al momento de crear el select2.

$('#mySelect2').select2({
        dropdownParent: $('#myModal .modal-body')
    });

Con esto le decimos al control que está dentro de un modal o tamben podemos hacerlo con el siguiente código, antes de llamar al modal:

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

Con esta última opción se podrá hacer una sola vez y no tener que aplicar el cambio de forma individual, en cualquiera de los casos tendremos funcionando correctamente el select2.


La explicación por parte del motivo por lo que sucede este problema lo pueden encontrar en este enlace.


3 comentarios:

Anónimo dijo...

hey gracias, estuve 2 dias casi en ese problema y tu me diste la solución. CRACK !!!

Anónimo dijo...

Muchas gracias llevo días buscando como solucionarlo

Anónimo dijo...

Genial, esta solución si que ha funcionado. Muchísimas gracias.