sagalbot/vue-select

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

Open

#1.282 aberto em 10 de set. de 2020

Ver no GitHub
 (0 comments) (0 reactions) (0 assignees)JavaScript (4.548 stars) (1.307 forks)batch import
bughelp wanted

Description

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.

Guia do colaborador

Pilha de tecnologia
vuejavascripthtml
Domain
frontend
Tipo Issue
bug
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
3
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-3 hours
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
stale
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
mostly clear
Prerequisites
basic Vue.jsunderstanding of DOM events
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
70
Direção de pesquisa
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.