sagalbot/vue-select

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

Open

Aperta il 10 set 2020

Vedi su GitHub
 (0 commenti) (0 reazioni) (0 assegnatari)JavaScript (4548 star) (1307 fork)batch import
bughelp wanted

Descrizione

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.

Guida contributor

Tech stack
vuejavascripthtml
Dominio
frontend
Tipo issue
bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
3
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-3 hours
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
stale
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
mostly clear
Prerequisiti
basic Vue.jsunderstanding of DOM events
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
70
Direzione di ricerca
The bug occurs when a v select with props `:multiple="true"` and `:close on select="false"` is nested inside a `<label>` element. The issue is likely caused by the label's click event re focusing the associated input or causing blur on the v select dropdown, which then closes and reopens. Examine the codepen link for reproduction, then investigate the event handlers in the vue select component, particularly how it handles click events and blur events. Look at files like `components/Select.vue` and `components/Dropdown.vue` for event propagation and prevention. The fix may involve stopping propagation or checking event target in the click handler.