Vaadin-combo-box: Cliquer sur le bouton bascule devrait focaliser l'entrée

@mas4ivv pouvez-vous reproduire le problème avec cette démo ?
https://jazzy-pedestrian.glitch.me

Le code est ici (appuyez sur "Remix Project" dans le menu pour apporter des modifications):
https://glitch.com/edit/#!/jazzy-pedestrian?path=index.html

Actuellement, lorsque je fais les étapes ci-dessus, je peux me concentrer sur la zone de liste déroulante en cliquant sur le bouton bascule.
Êtes-vous sûr d'utiliser la dernière version du composant ?

Je peux reproduire le problème avec le lien que vous avez fourni en utilisant Firefox 60.6.1esr (le seul navigateur que je peux actuellement utiliser). Lorsque je me concentre sur le champ de texte et que je clique sur le bouton bascule, la fenêtre contextuelle s'ouvre, mais le focus reste à l'intérieur du champ de texte. Toutes les entrées effectuées au clavier vont dans le champ de texte.

Pour contourner ce problème, j'ai inclus un écouteur de clic dans la liste déroulante :
this.$.toggleButton.addEventListener("click", fonction (e) {
that.$.input.focusElement.select();
});

Je viens de tester cela sur Firefox 60.7.0esr (64 bits) sur macOS et je ne peux pas le reproduire. @mas4ivv pouvez-vous mettre à niveau votre version Firefox ESR vers cette dernière version 60.7.0esr et réessayer ?

J'ai également téléchargé la version spécifique Firefox 60.6.1esr (à partir d' ici ) et je ne peux pas reproduire le problème même avec celle-ci (au moins sur macOS).

@mas4ivv Avez-vous des modules complémentaires activés dans Firefox ? Si tel est le cas, pourriez-vous essayer de désactiver tous les modules complémentaires pour vérifier qu'ils ne causent pas le problème ? Ou peut-être essayez (mode privé).

J'ai également installé Firefox 60.6.1esr sur un Windows 10 (64 bits) dans une machine virtuelle et là, cela semble également fonctionner (impossible de reproduire le problème).

Pour le moment, je ne peux utiliser que la version de Firefox que j'ai mentionnée (j'essaierai à la maison avec un Firefox plus récent), mais j'ai essayé la même chose sur mon mobile avec Chrome et j'obtiens le même résultat. Avez-vous cliqué exactement sur le bouton bascule ? Lorsque vous cliquez n'importe où ailleurs sur la liste déroulante, le comportement est celui attendu.

Oui, je me suis assuré de cliquer directement sur l'icône du bouton bascule, mais j'ai également testé en cliquant ailleurs.

Maintenant que vous avez mentionné Chrome mobile, je viens également de tester avec Chrome sur Android et là je peux voir le problème.

@mas4ivv Quel système d'exploitation utilisez-vous sur le bureau (Win, Linux, macOS) ?

Firefox sur Windows 7, Chrome sur Android.

@mas4ivv Utilisez -vous un écran tactile sur Windows 7 ?

Je viens de remarquer que je peux reproduire cela facilement sur le dernier Chrome et le dernier Firefox même sur macOS si j'ouvre les outils de développement et active la simulation d'appareil mobile en sélectionnant un appareil spécifique dans le mode de conception réactif.

Je suppose que le problème est probablement lié aux événements tactiles. Au moins maintenant, il est plus facile de déboguer après cette réalisation.

Également reproductible dans Chrome sans mode réactif (barre d'outils de l'appareil) en sélectionnant "Touch: Force enabled" dans l'onglet "Capteurs" dans les outils de développement.

En fait, il semble que ce soit une fonctionnalité qui a été spécifiquement implémentée pour empêcher l'ouverture du clavier virtuel sur les appareils tactiles (en cliquant sur le bouton bascule) à moins que l'utilisateur ne clique/tape explicitement sur la partie d'entrée.

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

Cette partie se concentre uniquement sur l'entrée (lorsque vous cliquez sur le bouton bascule) s'il ne s'agit pas d'un appareil tactile.

Nous devons probablement repenser la façon dont cela devrait fonctionner.

Cela aiderait s'il était en quelque sorte possible de détecter que l'appareil est tactile mais n'a pas de clavier virtuel (comme sur les appareils mobiles par défaut). Ou si nous pouvons détecter qu'il ne s'agit pas d'un "appareil mobile" mais que le toucher est activé. Je ne sais pas quelle serait la meilleure logique pour que cela fonctionne bien dans la plupart des cas. Cela peut devenir un peu complexe compte tenu des ordinateurs portables dotés d'écrans tactiles ou d'autres appareils "hybrides".

Une possibilité serait de vérifier les dimensions de la fenêtre d'affichage et si la fenêtre d'affichage est suffisamment grande (en supposant qu'il ne s'agisse pas d'un téléphone mobile où un clavier virtuel prend une quantité considérable d'espace sur l'écran), il peut alors être acceptable de concentrer l'entrée même sur un appareil tactile.

Ou alternativement, nous pourrions simplement lui faire vérifier si la racine parente de la zone de liste déroulante a un autre élément focalisé au lieu de la zone de liste déroulante et au moins brouiller cet élément (s'il ne concentre pas l'entrée de la zone de liste déroulante). Cela pourrait suffire. Au moins, il semble étrange de laisser l'accent sur un élément externe afin que cela résolve ce problème.

@ mas4ivv Compte tenu de ce qui précède, serait-il suffisant pour vous si dans ce cas (sur les appareils tactiles), nous focalisions simplement la zone de liste déroulante d'une manière ou d'une autre sans focaliser la partie d'entrée, ou en veillant simplement à déconcentrer tout élément externe (texte dans ce cas) qui aurait pu avoir le focus en cliquant sur le bouton bascule ?

@Haprog : Oui, les deux suggestions nous conviendraient. Et en voyant votre code, je comprends que ma prochaine tâche est de découvrir pourquoi nos ordinateurs de bureau pensent qu'ils sont des appareils tactiles...

J'ai au moins testé cela une fois sur une nouvelle machine virtuelle avec Win 7 (32 bits) exécutant la même version de Firefox 60 ESR mais il ne s'y reproduisait pas, donc au moins par défaut, même cette combinaison OS + navigateur ne devrait pas avoir le toucher activé. Peut-être quelque chose dans les paramètres de votre système d'exploitation ou de votre navigateur. Si vous avez modifié les paramètres FF, il se peut qu'une partie force les événements tactiles. Mais je suppose que cela pourrait aussi être causé par certains paramètres de Windows.

@mas4ivv Un correctif pour cela a été mis en œuvre afin que sur les appareils tactiles, il ne se concentre pas sur l'élément précédemment focalisé (s'il y en a un) lorsque vous cliquez sur le bouton bascule.

Le correctif est maintenant publié avec vaadin-combo-box v5.0.4 .

WebJar pour cette version est en cours de publication et devrait être bientôt disponible dans Maven Central (pour l'API Java).

Oui, les deux suggestions nous conviendraient. Et en voyant votre code, je comprends que ma prochaine tâche est de découvrir pourquoi nos ordinateurs de bureau pensent qu'ils sont des appareils tactiles...

Btw, je pense avoir lu quelque part que sur Windows, un autre logiciel pourrait installer un périphérique tactile virtuel, ce qui ferait penser aux navigateurs que l'ordinateur est tactile. C'est ce qui peut arriver si vous exécutez un logiciel spécial qui nécessite un périphérique tactile virtuel pour une raison quelconque.