Vaadin-combo-box: Mengklik tombol sakelar harus memfokuskan input

@mas4ivv dapatkah Anda mereproduksi masalah dengan demo ini?
https://jazzy-pedestrian.glitch.me

Kodenya ada di sini (tekan "Remix Project" di menu untuk melakukan perubahan):
https://glitch.com/edit/#!/jazzy -pedestrian?path=index.html

Saat ini, ketika melakukan langkah-langkah di atas, saya dapat memfokuskan kotak kombo dengan mengklik tombol sakelar.
Apakah Anda yakin menggunakan komponen versi terbaru?

Saya dapat mereproduksi masalah dengan tautan yang Anda berikan menggunakan Firefox 60.6.1esr (satu-satunya peramban yang dapat saya gunakan saat ini). Ketika saya memfokuskan bidang teks dan mengklik tombol sakelar, sembulan terbuka, tetapi fokus tetap berada di dalam bidang teks. Semua input yang dibuat oleh keyboard masuk ke bidang teks.

Sebagai solusinya, saya menyertakan pendengar klik di kotak kombo:
this.$.toggleButton.addEventListener("click", function (e) {
itu.$.input.focusElement.select();
});

Saya baru saja menguji ini di Firefox 60.7.0esr (64-bit) di macOS dan tidak dapat mereproduksinya. @mas4ivv dapatkah Anda meningkatkan versi Firefox ESR Anda ke 60.7.0esr terbaru ini dan coba lagi?

Saya juga mengunduh versi spesifik Firefox 60.6.1esr (dari sini ) dan tidak dapat mereproduksi masalah bahkan dengan yang itu (setidaknya di macOS).

@mas4ivv Apakah Anda memiliki add-on yang diaktifkan di Firefox? Jika demikian, dapatkah Anda mencoba menonaktifkan semua add-on untuk memeriksa bahwa mereka tidak menyebabkan masalah? Atau mungkin coba (mode Pribadi).

Saya juga menginstal Firefox 60.6.1esr pada Windows 10 (64bit) di mesin virtual dan sepertinya juga berfungsi (tidak dapat mereproduksi masalah).

Saat ini saya hanya dapat menggunakan versi Firefox yang saya sebutkan (akan mencoba di rumah dengan Firefox yang lebih baru), tetapi saya mencoba hal yang sama di ponsel saya dengan Chrome dan mendapatkan hasil yang sama. Apakah Anda mengklik tombol sakelar dengan tepat? Saat mengklik di tempat lain di kotak kombo, perilakunya seperti yang diharapkan.

Ya, saya memastikan untuk mengklik ikon tombol sakelar secara langsung, tetapi juga menguji mengklik di tempat lain.

Sekarang setelah Anda menyebutkan Chrome seluler, saya juga baru saja menguji dengan Chrome di Android dan di sana saya dapat melihat masalahnya.

@mas4ivv OS mana yang Anda gunakan di desktop (Win, Linux, macOS)?

Firefox di Windows 7, Chrome di Android.

@mas4ivv Apakah Anda menggunakan layar sentuh di Windows 7?

Saya baru menyadari bahwa saya dapat mereproduksi ini dengan mudah di Chrome terbaru dan Firefox terbaru bahkan di macOS jika saya membuka alat dev dan mengaktifkan simulasi perangkat seluler dengan memilih perangkat tertentu dalam mode desain responsif.

Saya kira masalahnya mungkin terkait dengan acara sentuh. Setidaknya sekarang lebih mudah untuk men-debug setelah realisasi ini.

Juga dapat direproduksi di Chrome tanpa mode responsif (bilah alat perangkat) dengan memilih "Sentuh: Diaktifkan secara paksa" dari tab "Sensor" di alat pengembang.

Sebenarnya sepertinya ini adalah fitur yang secara khusus telah diterapkan untuk mencegah terbukanya keyboard virtual pada perangkat sentuh (saat mengklik tombol sakelar) kecuali jika pengguna secara eksplisit mengklik/mengetuk bagian input.

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) { //...

Bagian ini hanya memfokuskan input (saat mengklik tombol sakelar) jika itu bukan perangkat yang mendukung sentuhan.

Kita mungkin perlu memikirkan kembali bagaimana ini seharusnya bekerja.

Akan membantu jika entah bagaimana mungkin untuk mendeteksi bahwa perangkat diaktifkan dengan sentuhan tetapi tidak memiliki keyboard virtual (seperti pada perangkat seluler secara default). Atau jika kami dapat mendeteksi bahwa itu bukan "perangkat seluler" tetapi memiliki sentuhan yang diaktifkan. Saya tidak yakin apa logika terbaik agar ini berfungsi dengan baik dalam banyak kasus. Ini bisa menjadi sedikit rumit mengingat laptop dengan layar sentuh atau perangkat "hibrida" lainnya.

Satu kemungkinan adalah memeriksa dimensi viewport dan jika viewport cukup besar (dengan asumsi itu bukan ponsel di mana keyboard virtual membutuhkan banyak ruang di layar) maka mungkin boleh untuk membuatnya memfokuskan input bahkan pada perangkat sentuh.

Atau sebagai alternatif, kita bisa membuatnya memeriksa apakah akar induk dari kotak kombo memiliki beberapa elemen lain yang difokuskan alih-alih kotak kombo dan setidaknya mengaburkan elemen itu (jika tidak memfokuskan input dari kotak kombo). Ini mungkin cukup baik. Setidaknya tampaknya aneh untuk meninggalkan fokus pada beberapa elemen eksternal sehingga ini akan menyelesaikan masalah itu.

@mas4ivv Mempertimbangkan hal di atas, apakah cukup baik untuk Anda jika dalam kasus ini (pada perangkat sentuh) kami hanya akan memfokuskan kotak kombo dalam beberapa cara tanpa memfokuskan bagian input, atau hanya memastikan untuk tidak memfokuskan elemen eksternal apa pun (teks bidang dalam kasus ini) yang mungkin memiliki fokus saat mengklik tombol sakelar?

@Haprog : Ya, kedua saran itu baik untuk kami. Dan melihat kode Anda, saya mengerti bahwa tugas saya selanjutnya adalah mencari tahu mengapa desktop kami menganggapnya sebagai perangkat sentuh...

Saya setidaknya menguji ini sekali pada VM baru dengan Win 7 (32bit) menjalankan versi yang sama dari Firefox 60 ESR tetapi tidak mereproduksi di sana sehingga setidaknya secara default bahkan kombinasi OS + browser seharusnya tidak mengaktifkan sentuhan. Mungkin sesuatu di OS atau pengaturan browser Anda. Jika Anda telah memodifikasi pengaturan FF, mungkin ada beberapa bagian yang memaksa acara sentuh. Tapi saya kira itu juga bisa disebabkan oleh beberapa pengaturan di Windows.

@mas4ivv Perbaikan untuk ini diterapkan sehingga pada perangkat yang mendukung sentuhan, elemen yang sebelumnya fokus akan tidak fokus (jika ada) saat mengklik tombol sakelar.

Perbaikan sekarang dirilis dengan vaadin-combo-box v5.0.4 .

WebJar untuk versi ini sedang diterbitkan dan akan segera tersedia di Maven Central (untuk Java API).

Ya, kedua saran itu akan baik-baik saja bagi kami. Dan melihat kode Anda, saya mengerti bahwa tugas saya selanjutnya adalah mencari tahu mengapa desktop kami menganggapnya sebagai perangkat sentuh...

Btw saya pikir saya membaca di suatu tempat bahwa pada Windows beberapa perangkat lunak lain dapat menginstal perangkat sentuh virtual, yang akan membuat browser berpikir bahwa komputer diaktifkan dengan sentuhan. Inilah yang mungkin terjadi jika Anda menjalankan beberapa perangkat lunak khusus yang memerlukan perangkat sentuh virtual untuk alasan apa pun.