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>

src/components/Select.vue

@@ -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;

src/scss/modules/_search-input.scss

@@ -34,6 +34,7 @@ $font-size: 1em;
   width: 0;
   max-width: 100%;
   flex-grow: 1;
+  z-index: 1;
 }
 
 .vs__search::placeholder {

src/scss/modules/_selected.scss

@@ -9,6 +9,7 @@
   line-height: $vs-component-line-height;
   margin: 4px 2px 0px 2px;
   padding: 0 0.25em;
+  z-index: 0;
 }
 
 .vs__deselect {

tests/unit/Dropdown.spec.js

@@ -1,10 +1,16 @@
 import { selectWithProps } from "../helpers";
 import OpenIndicator from "../../src/components/OpenIndicator";
 
+const preventDefault = jest.fn()
+
+function clickEvent (currentTarget) {
+  return { currentTarget, preventDefault }
+}
+
 describe("Toggling Dropdown", () => {
   it("should not open the dropdown when the el is clicked but the component is disabled", () => {
     const Select = selectWithProps({ disabled: true });
-    Select.vm.toggleDropdown({ target: Select.vm.$refs.search });
+    Select.vm.toggleDropdown(clickEvent(Select.vm.$refs.search));
     expect(Select.vm.open).toEqual(false);
   });
 
@@ -14,10 +20,23 @@ describe("Toggling Dropdown", () => {
       options: [{ label: "one" }]
     });
 
-    Select.vm.toggleDropdown({ target: Select.vm.$refs.search });
+    Select.vm.toggleDropdown(clickEvent(Select.vm.$refs.search));
     expect(Select.vm.open).toEqual(true);
   });
 
+  it("should not close the dropdown when the el is clicked and enableMouseInputSearch is set to true", () => {
+    const Select = selectWithProps({
+      value: [{ label: "one" }],
+      options: [{ label: "one" }],
+      enableMouseSearchInput: true
+    });
+
+    Select.vm.toggleDropdown(clickEvent(Select.vm.$refs.search));
+    expect(Select.vm.open).toEqual(true);
+    Select.vm.toggleDropdown(clickEvent(Select.vm.$el));
+    expect(Select.vm.open).toEqual(false)
+  });
+
   it("should open the dropdown when the selected tag is clicked", () => {
     const Select = selectWithProps({
       value: [{ label: "one" }],
@@ -26,7 +45,7 @@ describe("Toggling Dropdown", () => {
 
     const selectedTag = Select.find(".vs__selected").element;
 
-    Select.vm.toggleDropdown({ target: selectedTag });
+    Select.vm.toggleDropdown(clickEvent(selectedTag));
     expect(Select.vm.open).toEqual(true);
   });
 
@@ -35,7 +54,7 @@ describe("Toggling Dropdown", () => {
     const spy = jest.spyOn(Select.vm.$refs.search, "blur");
 
     Select.vm.open = true;
-    Select.vm.toggleDropdown({ target: Select.vm.$el });
+    Select.vm.toggleDropdown(clickEvent(Select.vm.$el));
 
     expect(spy).toHaveBeenCalled();
   });
@@ -133,7 +152,9 @@ describe("Toggling Dropdown", () => {
     const Select = selectWithProps({
       noDrop: true,
     });
-    Select.vm.toggleDropdown({ target: Select.vm.$refs.search });
+
+    Select.vm.toggleDropdown(clickEvent(Select.vm.$refs.search));
+
     expect(Select.vm.open).toEqual(true);
     await Select.vm.$nextTick();