Модальное окно Select2 Bootstrap с модальной прокруткой ⇐ Jquery

[Anonymous]

Обновление:Я добавил это:

Код: Выделить всё

$("#id_project").select2({dropdownParent: $(".modal-body")});

...и это приводит к правильному расположению раскрывающегося списка и возможности ввода поиска. К сожалению... это приводит к тому, что доставленные данные удаляются, и параметры для выбора становятся недоступными.
У меня есть форма, заполненная в модальном окне Bootstrap, которая выглядит следующим образом:

Код: Выделить всё

---------







[/b]







[list]
[*]


[/list]

Первая группа форм с синглом select2 демонстрирует проблемное поведение. Вторая группа форм с кратным select2 работает как положено. Почему здесь такое неравенство?
JavaScript:

Код: Выделить всё

  var loadForm = function () {
var btn = $(this);
$.ajax({
url: btn.attr("data-url"),
type: 'get',
dataType: 'json',
beforeSend: function () {
$("#modal-task").modal("show");
},
success: function (data) {
$("#modal-task .modal-content").html(data.html_form);
}
});
};

Версии:

• jQuery: 1.12.1
• Select2: 4.0 .5
• Bootstrap: 4

В Chrome все работает отлично. В Firefox поля Select2 в модальном окне не позволяют вводить данные для поиска. Это известная проблема (https://select2.org/troubleshooting/common-problems), но ни одно из известных решений мне не помогло.
Чтобы решить эту проблему, я добавил этот код для установки dropdownParent каждого Select2:

Код: Выделить всё

$.fn.select2.defaults.set("dropdownParent", $('#modal-task'));

Это позволяет вводить данные для поиска. Однако мое модальное окно достаточно длинное и требует прокрутки. Если модальное окно прокручивается за пределы исходного положения, нажатие на поле Select2 приводит к появлению вариантов выбора и ввода поиска над полем в верхней части модального окна. Это имеет смысл, поскольку все поля Select2 были привязаны к самому модальному модальному элементу с помощью dropdownParent.
Как мне предотвратить такое поведение и заставить отображаться варианты выбора Select2 и входные данные для поиска обычно (прямо над или под Select2 в зависимости от того, где он находится по отношению к краю окна)? Кроме того, на странице есть поля Select2, даже если модальное окно не активировано, поэтому такое воздействие на все поля Select2 не является идеальным.
Обновление: Я попробовал заменить другой код для этой строки:

Код: Выделить всё

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

Это имеет тот же эффект, что и отсутствие действий вообще: поисковые данные не работают в Firefox, но раскрывающиеся списки расположены правильно.
Обновление 2: Я попробовал это:

Код: Выделить всё

$('#id_project').set("dropdownParent", $('#id_project'));

Это привело к тому, что раскрывающийся список нигде не появился, и параметры исчезли (заменены на ---------).
Обновление 3. Я попробовал это...

Код: Выделить всё

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

...в результате чего поисковый ввод работал... но модальная прокрутка теперь не работает. Кроме того, раскрывающийся список немного смещен по левому краю поля «Выбрать2».

Подробнее здесь: https://stackoverflow.com/questions/487 ... dal-scroll