sagalbot/vue-select

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

Open

#1282 opened on Sep 10, 2020

View on 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.

Contributor guide

Tech stack
vuejavascripthtml
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
basic Vue.jsunderstanding of DOM events
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
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.