Select2 не работает в модальном режиме начальной загрузки во время сеанса удаленного рабочего стола, работает локально ⇐ Javascript

[Anonymous]

Я столкнулся с проблемой, из-за которой раскрывающиеся списки Select2 не работают правильно при использовании в модальном окне начальной загрузки во время сеанса удаленного рабочего стола (RDP). Однако та же функциональность отлично работает при локальном доступе.
Описание проблемы
У меня есть форма в модальном окне Bootstrap. который использует Select2 для раскрывающихся списков. Когда пользователи обращаются к приложению локально (непосредственно на компьютере), все работает как положено. Однако при доступе к нему через сеанс RDP Select2 дает сбой:

• Раскрывающийся список не открывается или не реагирует на щелчки.
• Иногда раскрывающийся список появляется за пределами видимой области или позади других элементов.
• События ввода, такие как ввод текста или нажатие, не регистрируются должным образом.

Техническая информация Подробности
Внешние библиотеки:

• Bootstrap 5.2
• Select2 v4.1

Серверная среда: Windows Server 2019 с включенными службами удаленных рабочих столов (RDS).
Клиент среда: Windows 10/11 с использованием стандартного клиента удаленного рабочего стола. (mstsc.exe).
Браузеры: проблема сохраняется в Chrome, Edge и Firefox во время сеансов RDP.
Что мы пробовали?< /p>

• Отключение принудительного модального фокуса:

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

    $('#myModal').modal({
backdrop: 'static',
keyboard: false,
focus: false
});

• Регулировка расположения раскрывающегося списка: настройка dropdownParent для обеспечения отображения раскрывающегося списка внутри модального окна:

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

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

• Повторная инициализация Select2 при модальном показе: уничтожение и повторная инициализация Select2 при открытии модального окна:

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

$('#myModal').on('shown.bs.modal', function() {
$('.select2').select2('destroy').select2({
dropdownParent: $(this)
});
});

• Настройка z-index и CSS: увеличение z-index контейнера Select2 для предотвращения проблем с рендерингом:
  

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

  .select2-container {
  z-index: 1055; /* Ensures it appears above other elements */
  }
  

• Тестирование более простых альтернатив: использование стандартного элемента HTML без Select2 работает без проблем, что указывает на то, что проблема специфична для Select2.
• Изменение настроек RDP:

Включено аппаратное ускорение как на сервере RDP, так и на клиенте.
Отключены визуальные эффекты, такие как сжатие и графическая оптимизация.

• Проверил другие библиотеки раскрывающихся списков: такие библиотеки, как Choices.js, работают нормально. но не полностью соответствуют требованиям приложения.

Вопросы к сообществу

• Известны ли проблемы совместимости с Select2 в удаленном рабочем столе Сеансы?
• Как мы можем обеспечить согласованное поведение Select2 в среде RDP?
• Существуют ли конкретные конфигурации или обходные пути для решения проблем с фокусом или рендерингом в этом случае? сценарий?

Дополнительные сведения
Вот упрощенный пример модального окна и Select2. настройка:

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

Form





Select an option:



Option 1

Option 2

Option 3

И инициализация Select2:

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

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

Резюме
Похоже, что у Select2 возникают проблемы с фокусом или рендерингом при использовании в модальных окнах Bootstrap во время сеансов RDP. Как мы можем решить или обойти эту проблему, чтобы функциональность работала должным образом в обеих средах?

Подробнее здесь: https://stackoverflow.com/questions/793 ... works-loca