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

Cuando uso select2 (entrada) en el modo bootstrap, no puedo escribir nada en él. ¿Está como discapacitado? Fuera del modal select2 funciona bien.

Ejemplo de trabajo: http://jsfiddle.net/byJy8/1/ código:

<!-- 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>
      </form>    
    </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>

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á integrado en un modo de arranque

Aug 28 '13 18:08 breq

Para Select2 v4:

Úselo 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 quede dentro del DOM del modal en lugar del cuerpo HTML (el valor predeterminado). Consulte https://select2.org/dropdown#dropdown-placement

Nov 24 '2015 01:11 dboswell

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

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

Para bootstrap 3, la solución es:

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

Bootstrap 4 cambió el nombre del enforceFocusmétodo a _enforceFocus, por lo que necesitarás parchearlo en su lugar:

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

Explicación copiada del enlace de arriba:

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

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

Oct 24 '2013 18:10 pymarco

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

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

Jan 08 '2019 21:01 bezz