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

Solución:

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">

para

<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">

(retirar tabindex = “- 1” de modal)

Para Select2 v4:

Usar dropdownParent para 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 se encuentre dentro del DOM del modal en lugar del cuerpo HTML (el 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 cambió el nombre de enforceFocus método para _enforceFocus, por lo que deberá parchear eso en su lugar:

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

Explicación copiada del enlace anterior:

Bootstrap registra un oyente en el evento focusin que verifica si el elemento enfocado es la superposición en sí o un descendiente de ella, si no, simplemente se reenfoca en la superposición. Con el menú desplegable select2 adjunto al cuerpo, esto efectivamente evita que ingrese nada en el campo de texto.

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

---

---

Utiliza Nuestro Buscador