<p>vaadin-combo-box lorsqu'il est placé à l'intérieur de paper-dialog ferme la boîte de dialogue dans certains cas.</p>

Créé le 21 févr. 2017 · 19Commentaires · Source: vaadin/vaadin-combo-box

La description

Lorsque l'élément vaadin-combo-box est placé dans la boîte de dialogue papier, si l'utilisateur ouvre la boîte de sélection (mais ne la sélectionne pas, la laisse simplement ouverte), puis cliquez n'importe où dans la boîte de dialogue pour fermer la boîte de dialogue.

Résultat attendu

Cliquez n'importe où dans la boîte de dialogue (pr. coin supérieur gauche) pour fermer la boîte, mais laissez la boîte de dialogue ouverte.

Résultat réel

Cliquez n'importe où dans la boîte de dialogue pour fermer toute la boîte de dialogue.

Démo en direct

https://jsfiddle.net/ribe/02tntfn3/2/

Étapes à reproduire

Ouvrez la boîte de dialogue,
ouvrez la boîte et ne sélectionnez pas - laissez-la ouverte,
3.Cliquez sur le coin supérieur gauche de la boîte de dialogue.

Source

GoceRibeski

Commentaire le plus utile

Pour votre information, cela se produit également si vous sélectionnez simplement un élément dans la zone de liste déroulante à l'aide de votre souris...

kito99 le 2 mars 2017

👍7

Tous les 19 commentaires

Il y a une sorte de bug avec la propagation des événements. Par exemple. fermer vaadin-combo-box en appuyant sur Esc ferme également la boîte de dialogue. Dans de tels cas, j'utilise généralement quelque chose comme on-keydown="_stopPropagation" , puis j'ajoute simplement un gestionnaire comme celui-ci :

_stopPropafation: function (e) {
  e.stopPropagation()
}

Il existe également une propriété stopKeyboardEventPropagation fournie par IronA11yKeysBehavior , mais ce comportement n'est pas implémenté par vaadin-combo-box et cette propriété semble ne pas fonctionner pour certains autres éléments, on dirait qu'elle gère les événements trop tard.

web-padawan le 21 févr. 2017

Je ne trouve pas où placer l'événement qui appellera stopPropagation dans Fiddle donné. Une idée?

GoceRibeski le 21 févr. 2017

Salut!

Le défi ici est que la superposition de <vaadin-combo-box> est placée sous <body> , qui est en dehors de <paper-dialog> donc elle considère tous les clics sur la superposition de la liste déroulante comme des "clics extérieurs ", qui ferme par défaut la boîte de dialogue.

Pour contourner ce problème, vous pouvez désactiver les clics extérieurs lorsque la combo-box est ouverte :

...
<vaadin-combo-box id="third" label="Focus Third" tabindex="3" on-focus="_focusInput" items="[[items]]" on-blur="_onBlur" on-opened-changed="_onComboBoxOpened">
        </vaadin-combo-box>

<script>
...
_onComboBoxOpened: function(e) {
  if (e.detail.value) {
    this.$.add_row_details_dialog.noCancelOnOutsideClick = true;
  } else {
    this.async(function() {
      this.$.add_row_details_dialog.noCancelOnOutsideClick = false;
    }, 10);
  }
}
...
</script>

Saulis le 1 mars 2017

@Saulis , votre approche n'a malheureusement pas fonctionné pour moi. Cependant, je viens de définir la propriété noCancelOnOutsideClick sur true dans la boîte de dialogue papier, et cela résout le problème (il n'était pas nécessaire de fermer la boîte de dialogue lorsque vous cliquez en dehors de celle-ci, dans ce cas).

kito99 le 2 mars 2017

👍1

Pour votre information, cela se produit également si vous sélectionnez simplement un élément dans la zone de liste déroulante à l'aide de votre souris...

kito99 le 2 mars 2017

👍7

Appliquer 'no-cancel-on-outside-click' à l'élément paper-dialog. Cela empêchera la boîte de dialogue de se fermer lorsque vous sélectionnez un élément dans la zone de liste déroulante vaadin par un clic de souris ou à partir du clavier.

<paper-dialog no-cancel-on-outside-click> <vaadin-combo-box class="elements-box" items="[[arrayOfValues]]"></vaadin-combo-box> </paper-dialog>

artem-vladimirov le 17 mars 2017

👍1

La solution de contournement de @kito99 / @artem-vladimirov avec no-cancel-on-outside-click ne convient pas en général ni pour moi, car je souhaite que l'utilisateur puisse fermer la boîte de dialogue avec un clic extérieur. (Mais je peux confirmer que cela fonctionne si ce n'est pas une exigence).

Une autre solution de contournement (similaire) consiste à écouter l'événement iron-overlay-canceled puis à appeler event.stopPropagation() et event.preventDefault() , mais cela pose le même problème que l'autre solution de contournement - cela empêche la fermeture de la boîte de dialogue sur un clic de fond.

J'ai essayé de différencier les deux événements l'un de l'autre mais sans succès jusqu'à présent.

Je peux confirmer l'observation de @ kito99 selon laquelle le simple fait de sélectionner un élément ferme la boîte de dialogue, tout comme l'annulation de la sélection en cliquant sur la boîte de dialogue papier.

ÉDITER:

Je suis venu avec la solution de contournement suivante:

        listeners: {
          "iron-overlay-canceled": "onCanceled",
        },
        onCanceled(event) {
            const paperDialogHoverElement = document.querySelector("paper-dialog:hover");
            const vaadinHoverElement = document.querySelector("vaadin-combo-box-overlay:hover");
            if (paperDialogHoverElement || vaadinHoverElement) {
                event.stopPropagation();
                event.preventDefault();
            }
        }

En bref, l'événement n'est annulé que si le curseur est sur le papier-dialogue ou sur l'élément de superposition. Avec cette solution de contournement, je peux sélectionner des valeurs de liste déroulante, fermer la boîte de dialogue avec un clic extérieur et également fermer la boîte de dialogue avec le bouton d'échappement. Testé sur Chrome et Firefox.

panuhorsmalahti le 3 avr. 2017

Y a-t-il quelque chose à faire ici à part attendre une nouvelle version ? solution de contournement officielle de vaadin?

timoteoponce le 10 mai 2017

Je ne sais pas pourquoi j'ai complètement raté ce problème pendant si longtemps. Il s'agit d'un problème d'utilisabilité vraiment fondamental et devrait être résolu dès que possible. Je vais voir si je peux inspirer @Saulis ou quelqu'un d'autre de l'équipe de développement à jeter un œil cette semaine ou la semaine prochaine.

jouni le 10 mai 2017

👍1

Hé les gars, veuillez essayer la branche iron-overlay-cancel (malheureusement, elle est construite au-dessus du maître actuel, il peut donc y avoir des conflits de dépendance avec le fait qu'elle soit hybride - résolvez deps en 2.0-preview et Polymer en fonction de votre choix vouloir)

J'ai également sélectionné le changement au-dessus de la branche 1.x ( iron-overlay-cancel-v1 ) mais je ne peux pas actuellement vérifier qu'il fonctionne moi-même car je ne veux pas gâcher ma configuration de Bower Polymer 2 : -)

Mise à jour : ce correctif ne fonctionne probablement que sur iron-overlay-behavior v1.10.3 ou version ultérieure.

Saulis le 10 mai 2017

@GoceRibeski @web-padawan @kito99 @artem-vladimirov @panuhorsmalahti @timoteoponce quelqu'un a une chance d'essayer le correctif ? Merci!

Saulis le 12 juin 2017

@Saulis Merci pour le rappel. Je viens de saisir la branche iron-overlay-cancel-v1 et je vois l'avertissement :

[vaadin-combo-box::_createEventHandler]: listener method `_onBlur` not defined

Ainsi, après avoir ouvert à la fois paper-dialog et intérieur vaadin-combo-box , j'ai essayé deux choses :

Lorsque vous appuyez sur la touche Échap, la boîte de dialogue se ferme tandis que la superposition de la liste déroulante reste ouverte,
Lors de la sélection d'un élément, la boîte de dialogue et la zone de liste déroulante se ferment.

Je n'ai pas beaucoup de temps pour enquêter en ce moment, mais je suppose que l'auditeur manquant pourrait en être la raison.

web-padawan le 12 juin 2017

@web-padawan merci ! pas besoin de s'inquiéter du manque _onBlur , c'est un écouteur qui est intentionnellement supprimé, mais qui a accidentellement laissé la liaison de l'écouteur en place. Je dois re-tester les problèmes que vous avez signalés, je n'ai pas testé la branche v1 moi-même.

Saulis le 12 juin 2017

@web-padawan Je peux confirmer que le correctif fonctionne pour moi à la fois sur iron-overlay-cancel avec Polymer 2.x et iron-overlay-cancel-v1 Polymer 1.9.1 - veuillez vérifier que vous avez iron-overlay-behavior v1.10.3 ou version ultérieure installée (j'utilise 2.0.0 )

Saulis le 12 juin 2017

@Saulis Cela ne fonctionne pas pour moi. En fait j'ai même un bug bizarre qui n'est pas présent sur la 2.0a4. Tout le texte de mon modèle disparaît

J'utilise Polymer 2 avec iron-overlay-behavior#2.0.0

Voici 2.0.0-alpha4 : http://www.giphy.com/gifs/3ohzdQKeVtoswDSpfW
Voici la branche iron-overlay-cancel : http://www.giphy.com/gifs/3o7btZ3T0yMwKkG6fm

arkihillel le 12 juin 2017

@arkihillel J'ai rebasé iron-overlay-cancel sur master , pouvez-vous réessayer ? Et assurez-vous de réinstaller tous les deps Bower.

Saulis le 12 juin 2017

Semble fonctionner pour moi.
Utilisation : vaadin-combo-box#iron-overlay-cancel, polymer#2.0.1, iron-overlay-behavior#2.0.0

Au fait, ce n'est pas grave, mais vous avez peut-être fait une faute de frappe avec _removeOutsideTabListener , c'est-à-dire Tab vs Tap ;)

jonagh le 12 juin 2017

@Saulis fonctionne maintenant !
Désolé pour la modification, je pensais avoir découvert un bug bizarre mais c'était une erreur de ma part

arkihillel le 13 juin 2017

👍1

Existe-t-il déjà une solution stable ?
Lorsqu'un Item est sélectionné à l'aide de la souris, l'événement (selectedItemChange) est déclenché deux fois ; le premier avec le nouvel élément sélectionné et le second avec le précédent (impossible de changer la sélection).
Merci.