2
0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-16 09:10:33 +03:00

fix: allow mouse events in the search input (#1092)

Co-authored-by: Doug Kurucz <doug.kurucz@twosixlabs.com>
Co-authored-by: Jeff <sagalbot@gmail.com>
This commit is contained in:
Doug Kurucz
2020-04-29 15:31:20 -04:00
committed by GitHub
parent 85a3b0e7b6
commit e931f23ce6
4 changed files with 40 additions and 11 deletions
+12 -6
View File
@@ -5,7 +5,7 @@
<template>
<div :dir="dir" class="v-select" :class="stateClasses">
<slot name="header" v-bind="scope.header" />
<div :id="`vs${uid}__combobox`" ref="toggle" @mousedown.prevent="toggleDropdown" class="vs__dropdown-toggle" role="combobox" :aria-expanded="dropdownOpen.toString()" :aria-owns="`vs${uid}__listbox`" aria-label="Search for option">
<div :id="`vs${uid}__combobox`" ref="toggle" @mousedown="toggleDropdown($event)" class="vs__dropdown-toggle" role="combobox" :aria-expanded="dropdownOpen.toString()" :aria-owns="`vs${uid}__listbox`" aria-label="Search for option">
<div class="vs__selected-options" ref="selectedOptions">
<slot v-for="option in selectedValue"
@@ -731,22 +731,28 @@
/**
* Toggle the visibility of the dropdown menu.
* @param {Event} e
* @param {Event} event
* @return {void}
*/
toggleDropdown ({target}) {
toggleDropdown (event) {
const targetIsNotSearch = event.target !== this.$refs.search;
if (targetIsNotSearch) {
event.preventDefault();
}
// don't react to click on deselect/clear buttons,
// they dropdown state will be set in their click handlers
const ignoredButtons = [
...(this.$refs['deselectButtons'] || []),
...([this.$refs['clearButton']] || [])
...([this.$refs['clearButton']] || []),
];
if (ignoredButtons.some(ref => ref.contains(target) || ref === target)) {
if (ignoredButtons.some(ref => ref.contains(event.target) || ref === event.target)) {
event.preventDefault();
return;
}
if (this.open) {
if (this.open && targetIsNotSearch) {
this.searchEl.blur();
} else if (!this.disabled) {
this.open = true;