Select2 funktioniert im Bootstrap-Modal während der Remotedesktopsitzung nicht, funktioniert lokal ⇐ JavaScript

[Guest]

Ich stoße auf ein Problem, bei dem Select2-Dropdowns nicht richtig funktionieren, wenn sie in einem Bootstrap-Modal während einer Remotedesktopsitzung (RDP) verwendet werden. Die gleiche Funktionalität funktioniert jedoch perfekt, wenn lokal darauf zugegriffen wird.
Problembeschreibung
Ich habe ein Formular innerhalb eines Bootstrap-Modals das Select2 für Dropdowns verwendet. Wenn Benutzer lokal (direkt auf dem Computer) auf die Anwendung zugreifen, funktioniert alles wie erwartet. Beim Zugriff darauf über eine RDP-Sitzung schlägt Select2 jedoch fehl:

• Das Dropdown-Menü wird nicht geöffnet oder reagiert nicht auf Klicks.
• Manchmal erscheint das Dropdown außerhalb des sichtbaren Bereichs oder hinter anderen Elementen.
• Eingabeereignisse wie Tippen oder Klicken scheinen nicht richtig registriert zu werden.

Technisch Details
Frontend-Bibliotheken:

• Bootstrap 5.2
• Select2 v4.1

Serverumgebung: Windows Server 2019 mit aktivierten Remotedesktopdiensten (RDS).
Client Umgebung: Windows 10/11, mit dem Standard-Remotedesktop-Client (mstsc.exe).
Browser: Das Problem besteht in Chrome, Edge und Firefox während RDP-Sitzungen weiterhin.
Was haben wir versucht?< /p>

• Modal-Fokus-Erzwingung deaktivieren:

Code: Select all

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

• Dropdown-Positionierung anpassen: dropdownParent konfigurieren, um sicherzustellen, dass das Dropdown innerhalb des Modals gerendert wird:

Code: Select all

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

• Select2 bei Modalshow neu initialisieren: Select2 zerstören und neu initialisieren, wenn das Modal geöffnet wird:

Code: Select all

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

• Anpassen des Z-Index und CSS: Erhöhen des Z-Index des Select2-Containers, um Rendering-Probleme zu verhindern:

Code: Select all

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

• Testen einfacherer Alternativen: Die Verwendung eines Standard-HTML-Elements ohne Select2 funktioniert ohne Probleme, was darauf hindeutet, dass das Problem spezifisch für Select2 ist.
• RDP-Einstellungen ändern:

Hardwarebeschleunigung sowohl auf dem RDP-Server als auch auf dem Client aktiviert.
Deaktiviert Visuelle Effekte wie Komprimierung und grafische Optimierungen.

• Andere Dropdown-Bibliotheken ausprobiert: Bibliotheken wie Choices.js funktionieren gut, erfüllen aber nicht alle Anforderungen die Anforderungen der Bewerbung.

Fragen an die Community

• Gibt es bekannte Kompatibilitätsprobleme mit Select2 in Remotedesktopsitzungen?
• Wie können wir sicherstellen, dass sich Select2 in einer RDP-Umgebung konsistent verhält?
• Gibt es spezielle Konfigurationen oder Problemumgehungen, um Fokus- oder Rendering-Probleme in diesem Szenario zu lösen?

Zusätzliche Details
Hier ist ein vereinfachtes Beispiel für die Modal- und Select2-Einrichtung:

Code: Select all

Form





Select an option:



Option 1

Option 2

Option 3

Und die Initialisierung für Select2:

Code: Select all

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

Zusammenfassung
Es scheint, dass Select2 Probleme mit dem Fokus oder der Darstellung hat, wenn es in Bootstrap-Modalen während RDP-Sitzungen verwendet wird. Wie können wir dieses Problem beheben oder umgehen, damit sich die Funktionalität in beiden Umgebungen wie erwartet verhält?