Select2 nie działa, gdy jest osadzony w modale bootstrap

Kiedy używam select2 (input) w modal bootstrap, nie mogę nic w nim wpisać. To jest jak niepełnosprawny? Poza modułem select2 działa dobrze.

Przykład działania: http://jsfiddle.net/byJy8/1/ kod:

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

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

i 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};
        }
    }
});

odpowiedzi:

tutaj możesz znaleźć szybką poprawkę

a oto „właściwa droga”: Select2 nie działa, gdy jest osadzony w modale bootstrap

Ok, mam to do pracy.

zmiana

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

do

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

(usuń tabindex = "- 1" z modalu)

W przypadku Select2 v4:

Służy dropdownParentdo dołączania menu rozwijanego do modalnego okna dialogowego, a nie do treści 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>

Spowoduje to dołączenie listy rozwijanej Select2, aby mieściła się w DOM modelu modalnego, a nie w treści HTML (domyślnie). Zobacz https://select2.org/dropdown#dropdown-placement

Znalazłem rozwiązanie tego na github dla select2

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

W przypadku bootstrap 3 rozwiązaniem jest:

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

Bootstrap 4 zmienił nazwę tej enforceFocusmetody na _enforceFocus, więc zamiast tego musisz załatać:

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

Wyjaśnienie skopiowane z powyższego linku:

Bootstrap rejestruje detektor zdarzenia focusin, który sprawdza, czy elementem skupionym jest sama nakładka, czy jej potomek - jeśli nie, to po prostu zmienia ostrość na nakładce. Z dołączonym do ciała menu select2 skutecznie zapobiega to wprowadzaniu czegokolwiek do pola tekstowego.

Możesz to naprawić, zastępując funkcję enforceFocus, która rejestruje zdarzenie w module

Po prostu usuń tabindex="-1"i dodaj styloverflow:hidden

Oto przykład:

<div id="myModal" class="modal fade" role="dialog" style="overflow:hidden;">
    <!---content modal here -->
</div>

.select2-close-mask{
    z-index: 2099;
}
.select2-dropdown{
    z-index: 3051;
}

To jest moje rozwiązanie z select2 4.0.0. Wystarczy zastąpić css bezpośrednio poniżej importu select2.css. Upewnij się, że indeks Z jest większy niż twoje okno dialogowe lub modalne. Właśnie dodam 2000 do domyślnych. Ponieważ indeks Z moich okien dialogowych wynosi około 1000.

Ustaw dropdownParent. Musiałem ustawić go na .modal-content w modalu, inaczej tekst skończyłby się na środku.

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

Odpowiedź, która dla mnie zadziałała, znajduje się tutaj: https://github.com/select2/select2-bootstrap-theme/issues/41

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

Nie wymaga również usuwania tabindex.

Według oficjalnej dokumentacji select2 ten problem występuje, ponieważ moduły Bootstrap mają tendencję do kradzieży fokusu z innych elementów poza modalem.

Domyślnie Select2 dołącza menu rozwijane do elementu i jest uważane za „poza modalne”.

Zamiast tego dołącz menu rozwijane do samego modalu za pomocą ustawienia dropdownParent:

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

Patrz odniesienie: https://select2.org/trou Rozwiązywanie problemów / common-problems

Miałem ten sam problem, aktualizując z-indexna .select2-containerpowinno załatwić sprawę. Upewnij się, że twój modal z-indexjest niższy niż select2.

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

Zaktualizowano: Jeśli powyższy kod nie działa poprawnie, usuń tabindexy z modalu, jak sugerował @breq

Po prostu użyj tego kodu w Document.read ()

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

Ten problem został rozwiązany Funkcja Single Jquery dla mnie działa

$('#myModal .select2').each(function() {  
   var $p = $(this).parent(); 
   $(this).select2({  
     dropdownParent: $p  
   });  
});

zmień plik select2.css

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

do

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

Aby lepiej zrozumieć, jak działają elementy tabindex, aby wypełnić zaakceptowaną odpowiedź:

Globalny atrybut tabindex jest liczbą całkowitą wskazującą, czy element może przyjmować fokus wejściowy (jest fokowalny), czy powinien uczestniczyć w sekwencyjnej nawigacji po klawiaturze, a jeśli tak, to w jakiej pozycji. Może przyjmować kilka wartości:
  - wartość ujemna oznacza, że ​​element powinien być ustawiany, ale nie powinien być osiągalny poprzez sekwencyjną nawigację za pomocą klawiatury;
  -0 oznacza, że ​​element powinien być nastawialny i osiągalny poprzez sekwencyjną nawigację za pomocą klawiatury, ale jego względna kolejność jest określona przez konwencję platformy;
  -środki o wartości dodatniej powinny być nastawialne i osiągalne poprzez sekwencyjną nawigację za pomocą klawiatury; jego względna kolejność jest zdefiniowana przez wartość atrybutu: sekwencyjne podążają za rosnącą liczbą tabindex. Jeśli kilka elementów ma ten sam tabindex, ich względna kolejność jest zgodna z ich względną pozycją w dokumencie.

od: Mozilla Devlopper Network

Jeśli masz problem z iPad klawiaturze, która ukrywa się modal bootstrap podczas klikania na select2 wejścia, można rozwiązać ten problem, dodając następującą regułę po inicjalizacji select2wejścia:

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
}

Zaczerpnięte z https://github.com/angular-ui/bootstrap/issues/1812#issuecomment-135119475

EDYCJA: Jeśli opcje nie są wyświetlane poprawnie, musisz użyć dropdownParentatrybutu podczas inicjowania select2:

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

Powodzenia (:

Na podstawie odpowiedzi @pymarco, którą napisałem, to rozwiązanie nie jest idealne, ale rozwiązuje problem focus2 i utrzymuje sekwencję tabulatorów wewnątrz modalnego

    $.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))
    }

W moim przypadku miałem ten sam problem z dwoma modułami i wszystko zostało rozwiązane za pomocą:

$('.select2').each(function() { 
    $(this).select2({ dropdownParent: $(this).parent()});
})

Podobnie jak w numerze 41 projektu, powiedział użytkownik.

$("#IlceId").select2({
    allowClear: true,
    multiple: false,
    dropdownParent: $("#IlceId").parent(),
    escapeMarkup: function (m) {
        return m;
    },
});

ten kod działa. Dziękuję Ci.

Okej, wiem, że jestem spóźniony na przyjęcie. Ale pozwól, że podzielę się z Tobą tym, co dla mnie zadziałało. Rozwiązania tabindex i z-index nie działały dla mnie.

Ustawienie elementu nadrzędnego elementu select działało zgodnie z typowymi problemami wymienionymi na stronie select2.

Jeśli używasz mobilnego wyskakującego okienka jquery, musisz przepisać funkcję _handleDocumentFocusIn:

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

Że ten sam problem z select2IN bootstrap modal, i roztwór w celu usunięcia overflow-y: auto;i overflow: hidden; z .modal-openi.modal classes

Oto przykład użycia jQuerydo usunięcia overflow-y:

$('.modal').css('overflow-y','visible');
$('.modal').css('overflow','visible');

miałem ten problem wcześniej, używam yii2 i rozwiązałem go w ten sposób

$.fn.modal.Constructor.prototype.enforceFocus = $.noop;

Miałem częściowo związany problem w aplikacji, więc wstawię 2c.

Mam wiele modów z formularzami zawierającymi widżety select2. Otwarcie modułu A, a następnie innego modułu w module A, spowodowałoby zniknięcie widżetów select2 w module B i nie zainicjowanie.

Każdy z tych modułów ładował formularze za pośrednictwem ajax.

Rozwiązaniem było usunięcie formularzy z domku podczas zamykania modalu.

$(document).on('hidden.bs.modal', '.modal', function(e) {
    // make sure we don't leave any select2 widgets around 
    $(this).find('.my-form').remove();
});

$('.modal').on('shown.bs.modal', function (e) {
    $(this).find('.select2me').select2({
        dropdownParent: $(this).find('.modal-content')
    });
})

Rozwiązałem to ogólnie w moim projekcie, przeciążając select2funkcję-. Teraz sprawdzi, czy nie ma dropdownParent i czy funkcja jest wywoływana na elemencie, który ma rodzica typu div.modal. Jeśli tak, doda ten modal jako element nadrzędny menu rozwijanego.

W ten sposób nie musisz go określać za każdym razem, gdy tworzysz pole select2-input.

(function(){
    var oldSelect2 = jQuery.fn.select2;
    jQuery.fn.select2 = function() {
        const modalParent = jQuery(this).parents('div.modal').first();
        if (arguments.length === 0 && modalParent.length > 0) {
            arguments = [{dropdownParent: modalParent}];
        } else if (arguments.length === 1
                    && typeof arguments[0] === 'object'
                    && typeof arguments[0].dropdownParent === 'undefined'
                    && modalParent.length > 0) {
            arguments[0].dropdownParent = modalParent;
        }
        return oldSelect2.apply(this,arguments);
    };
    // Copy all properties of the old function to the new
    for (var key in oldSelect2) {
        jQuery.fn.select2[key] = oldSelect2[key];
    }
})();

Po prostu zaczynam działać, włączając select2.min.css

Wypróbuj

Mój modalny HTML Bootstrap 3 to

<div id="changeTransportUserRequestPopup" class="modal fade" role="dialog">
    <div class="modal-dialog" style="width: 40%!important; ">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3>Warning</h3>
            </div>
            <div class="modal-body" id="changeTransportUserRequestPopupBody">
                <select id="cbTransport" class="js-example-basic-single" name="cbTransport" style="width:100%!important;"></select>
            </div>
            <div class="modal-footer">
                <button id="noPost" class="btn btn-default" name="postConfirm" value="false" data-dismiss="modal">Cancel</button>
                <button type="submit" id="yesChangeTransportPost" class="btn btn-success" name="yesChangeTransportPost" value="true" data-dismiss="modal">Yes</button>
            </div>
        </div>
    </div>
</div>

możesz ponownie wywołać wyzwalacz select2 w swoim $ (dokumencie)

$(".select2").select2({ 
                width: '120' 
            });

aby użyć bootstrap 4.0 po stronie serwera (wbudowane dane ajax lub json), musisz dodać to wszystko:

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

a następnie, gdy modal jest otwarty, utwórz select2:

  // when modal is open
  $('.modal').on('shown.bs.modal', function () {
            $('select').select2({
                  // ....
            });
  });

W moim przypadku to zrobiłem i działa. Używam pakietu, aby go załadować iw tym przypadku zadziałało to dla mnie

 $(document).on('select2:select', '#Id_Producto', function (evt) {
   // Here your code...
  });