sagalbot/vue-select

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

Open

#1,282 创建于 2020年9月10日

在 GitHub 查看
 (0 评论) (0 反应) (0 负责人)JavaScript (4,548 star) (1,307 fork)batch import
bughelp wanted

描述

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.

贡献者指南

技术栈
vuejavascripthtml
领域
frontend
议题类型
bug
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
3
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
1-3 hours
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
stale
清晰度议题是否清楚说明期望改动、验收标准和下一步。
mostly clear
前置要求
basic Vue.jsunderstanding of DOM events
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
70
研究方向
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.