Select2 funktioniert nicht, wenn es in einem Bootstrap-Modal eingebettet ist

Question

Wenn ich ein select2 (Eingabe) in einem Bootstrap-Modal verwende, kann ich nichts eingeben. Ist es deaktiviert? Außerhalb des Modals funktioniert select2 einwandfrei.

Arbeitsbeispiel: http://jsfiddle.net/byJy8/1/ code:

        ×
        Panel

            Numer

        Schließen
        Änderungen speichern

JS

$("#vdn_number").select2({
    placeholder: "00000",
    minimumInputLength: 2,
    ajax: {
        url: "getAjaxData/",
        dataType: 'json',
        type: "POST",
        data: function (term, page) {
            return {
                q: term, // Suchbegriff
                col: 'vdn'
            };
        },
        results: function (data) { // Die Ergebnisse in das von Select2 erwartete Format parsen.
            // Da wir benutzerdefinierte Formatierungsfunktionen verwenden, müssen wir die entfernten JSON-Daten nicht ändern
            return {results: data};
        }
    }
});

Antworten:

hier finden Sie eine schnelle Lösung

und hier ist 'der richtige Weg': Select2 funktioniert nicht, wenn es in ein Bootstrap-Modal eingebettet ist

Answer 1

Ok, ich habe es zum Laufen gebracht.

ändern

zu

(entfernen tabindex="-1" vom Modal)

Answer 2

Für Select2 v4:

Verwenden Sie dropdownParent, um das Dropdown-Menü an das Modal anzuhängen, anstatt an den HTML-Body.

        ×
        Modaltitel

          Alabama
            ...
          Wyoming

        Schließen
        Änderungen speichern

$(document).ready(function() {
  $("#select2insidemodal").select2({
    dropdownParent: $("#myModal")
  });
});

Dadurch wird das Select2-Dropdown so angehängt, dass es sich im DOM des Modals befindet, anstatt am HTML-Body (Standard). Siehe https://select2.org/dropdown#dropdown-placement

Answer 3

Ich habe eine Lösung dafür auf GitHub für select2 gefunden

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

Für Bootstrap 3 ist die Lösung:

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

Bootstrap 4 hat die Methode enforceFocus in _enforceFocus umbenannt, daher müssen Sie das stattdessen anpassen:

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

Erklärung aus dem obigen Link kopiert:

Bootstrap registriert einen Listener für das focusin-Ereignis, der überprüft, ob das fokussierte Element entweder das Overlay selbst oder ein Nachfahre davon ist - sonst wird einfach wieder das Overlay fokussiert. Da das select2-Dropdown am Body angehängt ist, wird effektiv verhindert, dass Sie etwas in das Textfeld eingeben können.

Sie können dies vorübergehend beheben, indem Sie die enforceFocus-Funktion überschreiben, die das Ereignis am Modal registriert

Answer 4

Setze das dropdownParent. Ich musste es auf .modal-content innerhalb des Modals setzen, sonst würde der Text zentriert landen.

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

Answer 5

Einfach entfernen tabindex="-1" und fügen Sie Stil overflow:hidden hinzu

Hier ist ein Beispiel: