Vaadin-combo-box: Ein Klick auf den Toggle-Button sollte die Eingabe fokussieren

@mas4ivv können Sie das Problem mit dieser Demo reproduzieren?
https://jazzy-pedestrian.glitch.me

Der Code ist hier (drücken Sie "Remix Project" im Menü, um Änderungen vorzunehmen):
https://glitch.com/edit/#!/jazzy -pedestrian?path=index.html

Derzeit kann ich bei den obigen Schritten das Kombinationsfeld fokussieren, indem ich auf die Umschalttaste klicke.
Sind Sie sicher, dass Sie die neueste Version der Komponente verwenden?

Ich kann das Problem mit dem von Ihnen bereitgestellten Link mit Firefox 60.6.1esr reproduzieren (der einzige Browser, den ich derzeit verwenden kann). Wenn ich das Textfeld fokussiere und auf die Umschaltfläche klicke, öffnet sich das Popup, aber der Fokus bleibt im Textfeld. Alle Eingaben über die Tastatur gehen in das Textfeld.

Als Workaround habe ich einen Klick-Listener in die Combobox eingefügt:
this.$.toggleButton.addEventListener("click", function (e) {
dass.$.input.focusElement.select();
});

Ich habe dies gerade auf Firefox 60.7.0esr (64-Bit) auf macOS getestet und kann es nicht reproduzieren. @mas4ivv können Sie Ihre Firefox ESR-Version auf die neueste Version 60.7.0esr aktualisieren und es erneut versuchen?

Ich habe auch die spezifische Version Firefox 60.6.1esr (von hier ) heruntergeladen und kann das Problem auch mit dieser nicht reproduzieren (zumindest unter macOS).

@mas4ivv Haben Sie in Firefox irgendwelche Add-Ons aktiviert? Wenn ja, könnten Sie versuchen, alle Add-Ons zu deaktivieren, um zu überprüfen, ob sie das Problem nicht verursachen? Oder versuchen Sie es vielleicht (Privatmodus).

Ich habe auch Firefox 60.6.1esr auf einem Windows 10 (64bit) in einer virtuellen Maschine installiert und dort scheint es auch zu funktionieren (kann das Problem nicht reproduzieren).

Im Moment kann ich nur die erwähnte Firefox-Version verwenden (werde es zu Hause mit einem neueren Firefox versuchen), aber ich habe es auf meinem Handy mit Chrome versucht und das gleiche Ergebnis erhalten. Hast du genau auf den Toggle-Button geklickt? Wenn Sie auf eine andere Stelle in der Combobox klicken, ist das Verhalten wie erwartet.

Ja, ich habe dafür gesorgt, dass ich direkt auf das Symbol für die Umschalttaste geklickt habe, aber auch das Klicken an anderer Stelle getestet.

Nachdem Sie jetzt mobiles Chrome erwähnt haben, habe ich auch gerade Chrome auf Android getestet und dort kann ich das Problem sehen.

@mas4ivv Welches Betriebssystem verwenden Sie auf dem Desktop (Win, Linux, macOS)?

Firefox unter Windows 7, Chrome unter Android.

@mas4ivv Verwenden Sie einen Touchscreen unter Windows 7?

Mir ist gerade aufgefallen, dass ich dies sowohl auf dem neuesten Chrome als auch auf dem neuesten Firefox sogar unter macOS problemlos reproduzieren kann, wenn ich Entwicklungstools öffne und die Simulation mobiler Geräte aktiviere, indem ich ein bestimmtes Gerät im Responsive-Design-Modus auswähle.

Ich denke, das Problem hängt wahrscheinlich mit Berührungsereignissen zusammen. Zumindest ist es nach dieser Erkenntnis jetzt einfacher zu debuggen.

Auch in Chrome ohne Responsive-Modus (Gerätesymbolleiste) reproduzierbar, indem Sie in den Entwicklungstools auf der Registerkarte "Sensoren" "Touch: Force enabled" auswählen.

Tatsächlich sieht es so aus, als ob dies eine Funktion ist, die speziell implementiert wurde, um das Öffnen der virtuellen Tastatur auf Touch-Geräten (beim Klicken auf die Umschalttaste) zu verhindern, es sei denn, der Benutzer klickt/tippt explizit auf den Eingabeteil.

https://github.com/vaadin/vaadin-combo-box/blob/master/src/vaadin-combo-box-mixin.html#L331

// For touch devices, we don't want to popup virtual keyboard on touch devices unless input
// is explicitly focused by the user.
if (!this.$.overlay.touchDevice) { //...

Dieser Teil konzentriert sich nur auf die Eingabe (beim Klicken auf die Umschaltfläche), wenn es sich nicht um ein berührungsempfindliches Gerät handelt.

Wir müssen wahrscheinlich überdenken, wie das funktionieren soll.

Es wäre hilfreich, wenn es irgendwie möglich wäre zu erkennen, dass das Gerät Touch-fähig ist, aber keine virtuelle Tastatur hat (wie bei mobilen Geräten standardmäßig). Oder wenn wir feststellen können, dass es sich nicht um ein "mobiles Gerät" handelt, aber Touch aktiviert ist. Ich bin mir nicht sicher, was die beste Logik wäre, damit dies in den meisten Fällen gut funktioniert. Dies kann bei Laptops mit Touchscreens oder anderen "hybriden" Geräten etwas komplex werden.

Eine Möglichkeit wäre, die Abmessungen des Ansichtsfensters zu überprüfen. Wenn das Ansichtsfenster groß genug ist (vorausgesetzt, es handelt sich nicht um ein Mobiltelefon, bei dem eine virtuelle Tastatur viel Platz auf dem Bildschirm einnimmt), kann es in Ordnung sein, die Eingabe sogar darauf zu fokussieren ein Touch-Gerät.

Oder alternativ könnten wir es einfach überprüfen lassen, ob die übergeordnete Wurzel des Kombinationsfelds ein anderes Element anstelle des Kombinationsfelds hat, und dieses Element zumindest verwischen (wenn die Eingabe des Kombinationsfelds nicht fokussiert wird). Dies könnte gut genug sein. Zumindest scheint es seltsam, sich auf ein externes Element zu konzentrieren, damit dieses Problem gelöst wird.

@mas4ivv In Anbetracht der obigen

@Haprog : Ja, beide Vorschläge wären für uns in Ordnung. Und wenn ich Ihren Code sehe, verstehe ich, dass meine nächste Aufgabe darin besteht, herauszufinden, warum unsere Desktops denken, dass sie Touch-Geräte sind...

Ich habe dies zumindest einmal auf einer neuen VM mit Win 7 (32 Bit) getestet, auf der dieselbe Version von Firefox 60 ESR ausgeführt wurde, aber es wurde dort nicht reproduziert, so dass zumindest standardmäßig nicht einmal die Kombination von OS + Browser Touch aktiviert sein sollte. Vielleicht etwas in Ihren Betriebssystem- oder Browsereinstellungen. Wenn Sie die FF-Einstellungen geändert haben, gibt es möglicherweise einen Teil, der Touch-Ereignisse erzwingt. Aber ich denke, es könnte auch an einigen Einstellungen in Windows liegen.

@mas4ivv Ein Fix dafür wurde implementiert, damit auf Touch-fähigen Geräten das zuvor fokussierte Element (sofern vorhanden) beim Klicken auf die Umschaltfläche deaktiviert wird.

Der Fix wird jetzt mit vaadin-combo-box v5.0.4 veröffentlicht .

WebJar für diese Version wird veröffentlicht und sollte in Kürze in Maven Central (für Java API) verfügbar sein.

Ja, beide Vorschläge wären für uns in Ordnung. Und wenn ich Ihren Code sehe, verstehe ich, dass meine nächste Aufgabe darin besteht, herauszufinden, warum unsere Desktops denken, dass sie Touch-Geräte sind...

Übrigens, ich glaube, ich habe irgendwo gelesen, dass unter Windows eine andere Software ein virtuelles Touch-Gerät installieren könnte, was die Browser glauben lässt, dass der Computer Touch-fähig ist. Dies kann passieren, wenn Sie eine spezielle Software ausführen, die aus irgendeinem Grund ein virtuelles Touch-Gerät benötigt.