sagalbot/vue-select

Cannot select item when v-select nested inside of label with certain props

Offen

#1.282 geöffnet am 10.09.2020

Auf GitHub ansehenContributor Guide
 (0 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)JavaScript (1.307 Forks)batch import
bughelp wanted

Repository-Metriken

Stars
 (4.548 Sterne)
PR-Merge-Metriken
 (Keine gemergten PRs in 30 T)

Beschreibung

Describe the bug With certain props a v-select nested within a label element will not work. When the user clicks an option it appears briefly before being removed.

To Reproduce Add <v-select :options="options" :multiple="true" :close-on-select="false"> within a <label> element.

Codepen demonstration https://codepen.io/abaldwin88/pen/ExKEpaG

Expected behavior The user is able to select elements without being removed shortly after.

Screenshots Screen Recording: record2 Note: I'm using a mix of the keyboard and mouse in the recording.

Desktop:

  • Device: Macbook
  • OS: 10.13.6 High Sierra (Confirmed on multiple laptops)
  • Browser Chrome
  • Version 85.0.4183.83

Additional context Note that you can still use keyboard controls to select items.

Contributor Guide

Research-Richtung
Der Fehler tritt auf, wenn eine v select Komponente mit den Props `:multiple="true"` und `:close on select="false"` innerhalb eines `<label>` Elements verschachtelt ist. Das Problem wird wahrscheinlich durch das Klickereignis des Labels verursacht, das den zugehörigen Input erneut fokussiert oder ein Blur auf dem v select Dropdown auslöst, wodurch es sich schließt und wieder öffnet. Untersuche den CodePen Link zur Reproduktion, dann untersuche die Event Handler in der vue select Komponente, insbesondere wie sie Klick und Blur Ereignisse behandelt. Sieh dir Dateien wie `components/Select.vue` und `components/Dropdown.vue` auf Ereignisausbreitung und verhinderung an. Die Lösung könnte das Stoppen der Ausbreitung oder das Überprüfen des Event Targets im Klick Handler beinhalten.
Tech Stack
javascriptvue
Domain
frontend
Issue Type
Fehler
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 Stunden
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Frisch
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
Vue.js
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
75