<p>vaadin-combo-box schließt in einigen Fällen den Dialog, wenn er in den Papierdialog eingefügt wird.</p>
Beschreibung
Wenn das vaadin-combo-box -Element innerhalb des Papierdialogs platziert ist und der Benutzer das Feld zur Auswahl öffnet (aber nicht auswählt, es einfach geöffnet lässt), dann auf eine beliebige Stelle im Dialog klickt, wird der Dialog geschlossen.
Erwartetes Ergebnis
Klicken Sie irgendwo in den Dialog (z. B. obere linke Ecke), um das Feld zu schließen, aber den Dialog geöffnet zu lassen.
Tatsächliches Ergebnis
Klicken Sie auf eine beliebige Stelle im Dialogfeld, um das gesamte Dialogfeld zu schließen.
Live-Demo
https://jsfiddle.net/ribe/02tntfn3/2/
Schritte zum Reproduzieren
- Dialog öffnen,
- Öffnen Sie die Box und wählen Sie nicht aus - lassen Sie sie geöffnet,
3.Klicken Sie auf in der oberen linken Ecke des Dialogs.
GoceRibeski
Alle 19 Kommentare
Es gibt eine Art Fehler bei der Ereignisweitergabe. Z.B. Schließen vaadin-combo-box durch Drücken von Esc schließt auch den Dialog. In solchen Fällen verwende ich normalerweise etwas wie on-keydown="_stopPropagation" und füge dann einfach einen Handler wie diesen hinzu:
_stopPropafation: function (e) {
e.stopPropagation()
}
Es gibt auch eine stopKeyboardEventPropagation Eigenschaft, die von IronA11yKeysBehavior bereitgestellt wird, aber dieses Verhalten wird nicht von vaadin-combo-box implementiert und diese Eigenschaft scheint für einige andere Elemente nicht zu funktionieren, es sieht so aus, als würde sie Ereignisse zu spät verarbeiten.
web-padawan
am 21. Feb. 2017
Ich kann nicht finden, wo ich das Ereignis platzieren soll, das stopPropagation in der angegebenen Fiddle aufruft. Irgendeine Idee?
GoceRibeski
am 21. Feb. 2017
Hi!
Die Herausforderung dabei ist, dass das Overlay von <vaadin-combo-box> unter <body> platziert wird, was außerhalb von <paper-dialog> liegt, sodass alle Klicks auf das Overlay des Kombinationsfelds als „Klicks von außen“ betrachtet werden ", die standardmäßig den Dialog schließen.
Als Problemumgehung können Sie die Außenklicks deaktivieren, wenn das Kombinationsfeld geöffnet ist:
...
<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
am 1. März 2017
@Saulis , dein Ansatz hat bei mir leider nicht funktioniert. Allerdings habe ich einfach die noCancelOnOutsideClick-Eigenschaft im Papierdialog auf true gesetzt, und das behebt das Problem (in diesem Fall war es nicht erforderlich, den Dialog zu schließen, wenn Sie außerhalb davon klicken).
kito99
am 2. März 2017
FYI, das passiert auch, wenn Sie einfach ein Element in der Combobox mit der Maus auswählen ...
kito99
am 2. März 2017
Wenden Sie „Kein Abbruch bei Klick von außen“ auf das Papierdialogelement an. Dadurch wird verhindert, dass der Dialog geschlossen wird, wenn Sie ein Element in der Vaadin-Combo-Box per Mausklick oder über die Tastatur ausgewählt haben.
<paper-dialog no-cancel-on-outside-click>
<vaadin-combo-box class="elements-box" items="[[arrayOfValues]]"></vaadin-combo-box>
</paper-dialog>
artem-vladimirov
am 17. März 2017
Der Workaround von @kito99 / @artem-vladimirov mit no-cancel-on-outside-click ist generell und für mich nicht geeignet, da ich möchte, dass der Benutzer den Dialog mit einem Outside-Click schließen kann. (Aber ich kann bestätigen, dass es funktioniert, wenn das keine Voraussetzung ist).
Eine andere (ähnliche) Problemumgehung besteht darin, auf das Ereignis iron-overlay-canceled zu warten und dann event.stopPropagation() und event.preventDefault() aufzurufen, aber dies hat das gleiche Problem wie die andere Problemumgehung – es verhindert das Schließen des Dialogs auf einen Hintergrund klicken.
Ich habe versucht, die beiden Ereignisse voneinander zu unterscheiden, aber bisher kein Glück.
Ich kann die Beobachtung von @kito99 bestätigen, dass das bloße Auswählen eines Elements den Dialog schließt, ebenso wie das Abbrechen der Auswahl durch Klicken auf den Papierdialog.
BEARBEITEN:
Folgende Problemumgehung habe ich mir ausgedacht:
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();
}
}
Kurz gesagt, das Ereignis wird nur abgebrochen, wenn sich der Cursor auf dem Papierdialog oder dem Overlay-Element befindet. Mit dieser Problemumgehung kann ich Dropdown-Werte auswählen, den Dialog mit einem Außenklick schließen und den Dialog auch mit der Escape-Taste schließen. Getestet auf Chrome und Firefox.
panuhorsmalahti
am 3. Apr. 2017
Gibt es hier etwas zu tun, außer auf eine neue Version zu warten? Offizielle Vaadin-Problemumgehung?
timoteoponce
am 10. Mai 2017
Ich bin mir nicht sicher, warum ich dieses Thema so lange komplett verpasst habe. Dies ist ein wirklich grundlegendes Usability-Problem und sollte so schnell wie möglich behoben werden. Ich werde sehen, ob ich @Saulis oder jemand anderen aus dem Entwicklerteam inspirieren kann, diese oder nächste Woche einen Blick darauf zu werfen.
jouni
am 10. Mai 2017
Hey Leute, probiert bitte den Branch iron-overlay-cancel aus (leider baut dieser auf dem aktuellen Master auf, daher könnte es einige Abhängigkeitskonflikte geben, da er hybrid ist – löst deps zu 2.0-preview auf und Polymer zu wem auch immer wollen)
Ich habe auch die Änderung über dem Zweig 1.x ( iron-overlay-cancel-v1 ) ausgewählt, kann aber derzeit nicht überprüfen, ob sie selbst funktioniert, da ich mein Polymer 2 Bower-Setup nicht durcheinander bringen möchte: -)
Update: Dieser Fix funktioniert wahrscheinlich nur auf iron-overlay-behavior v1.10.3 oder höher.
Saulis
am 10. Mai 2017
@GoceRibeski @web-padawan @kito99 @artem-vladimirov @panuhorsmalahti @timoteoponce hat jemand die Möglichkeit, die Lösung auszuprobieren? Danke!
Saulis
am 12. Juni 2017
@Saulis Danke für die Erinnerung. Ich habe gerade den Zweig iron-overlay-cancel-v1 gepackt und sehe die Warnung:
[vaadin-combo-box::_createEventHandler]: listener method `_onBlur` not defined
Nachdem ich sowohl paper-dialog als auch das innere vaadin-combo-box geöffnet hatte, habe ich zwei Dinge ausprobiert:
- Wenn Sie die Esc-Taste drücken, wird der Dialog geschlossen, während das Kombinationsfeld-Overlay geöffnet bleibt.
- Beim Auswählen eines Elements werden sowohl das Dialogfeld als auch das Kombinationsfeld geschlossen.
Ich habe im Moment nicht viel Zeit, um nachzuforschen, aber ich vermute, dass der fehlende Zuhörer der Grund sein könnte.
web-padawan
am 12. Juni 2017
@web-padawan danke! Sie müssen sich keine Gedanken über das fehlende _onBlur machen, es ist ein Listener, der absichtlich entfernt wurde, aber die Listener-Bindung versehentlich beibehalten hat. Ich muss die von Ihnen gemeldeten Probleme erneut testen, ich habe den v1-Zweig nicht selbst getestet.
Saulis
am 12. Juni 2017
@web-padawan Ich kann bestätigen, dass der Fix für mich sowohl auf iron-overlay-cancel mit Polymer 2.x als auch iron-overlay-cancel-v1 Polymer 1.9.1 funktioniert – bitte überprüfen Sie, ob Sie iron-overlay-behavior v1.10.3 oder höher installiert (ich verwende 2.0.0 )
Saulis
am 12. Juni 2017
@Saulis Es funktioniert nicht für mich. Tatsächlich habe ich sogar einen seltsamen Fehler, der auf 2.0a4 nicht vorhanden ist. Der gesamte Text aus meiner Vorlage verschwindet
Ich verwende Polymer 2 mit iron-overlay-behavior#2.0.0
Hier ist 2.0.0-alpha4 : http://www.giphy.com/gifs/3ohzdQKeVtoswDSpfW
Hier ist der iron-overlay-cancel -Zweig: http://www.giphy.com/gifs/3o7btZ3T0yMwKkG6fm
arkihillel
am 12. Juni 2017
@arkihillel Ich habe iron-overlay-cancel auf master umbasiert, kannst du es noch einmal versuchen? Und stellen Sie sicher, dass Sie alle Bower-Deps neu installieren.
Saulis
am 12. Juni 2017
Scheint bei mir zu funktionieren.
Verwendung: vaadin-combo-box#iron-overlay-cancel, polymer#2.0.1, iron-overlay-behavior#2.0.0
Übrigens, keine große Sache, aber Sie haben möglicherweise einen Tippfehler bei _removeOutsideTabListener gemacht, dh Tab vs Tap ;)
jonagh
am 12. Juni 2017
@Saulis Funktioniert jetzt!
Entschuldigung für die Bearbeitung, ich dachte, ich hätte einen seltsamen Fehler entdeckt, aber es war ein Fehler von mir
arkihillel
am 13. Juni 2017
Gibt es schon eine stabile Lösung?
Wenn ein Item mit der Maus ausgewählt wird, wird das Ereignis (s selectedItemChange) zweimal ausgelöst; die erste mit dem neu ausgewählten Element und die zweite mit dem vorherigen (keine Änderung der Auswahl möglich).
Danke.
JuanCalderon
am 4. Aug. 2017
Verwandte Themen
davidmaxwaterman
·
6Kommentare
sohrabtaee
·
4Kommentare
OlliTietavainenVaadin
·
6Kommentare
florent1933
·
14Kommentare
JMuratha
·
4Kommentare
Hilfreichster Kommentar
FYI, das passiert auch, wenn Sie einfach ein Element in der Combobox mit der Maus auswählen ...