From 58905e1659ffca32a9fb3c21c59a555d4ab3cd0d Mon Sep 17 00:00:00 2001
From: HckrNews <w3n@w3news.org>
Date: Mon, 23 Aug 2021 22:50:06 +0200
Subject: [PATCH] fix: use click instead of mousedown event, fixes iOS bug
 (#1248)

Thanks to @PieterWigboldus for originally reporting in #814 and fixing in #815.

Co-authored-by: Jeff Sagal <sagalbot@gmail.com>
---
 src/components/Select.vue              |  2 +-
 src/scss/modules/_dropdown-option.scss | 10 ++--------
 tests/unit/Selectable.spec.js          |  4 ++--
 3 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index a99a5ef..c2d81d8 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -109,7 +109,7 @@
           }"
           :aria-selected="index === typeAheadPointer ? true : null"
           @mouseover="selectable(option) ? (typeAheadPointer = index) : null"
-          @mousedown.prevent.stop="selectable(option) ? select(option) : null"
+          @click.prevent.stop="selectable(option) ? select(option) : null"
         >
           <slot name="option" v-bind="normalizeOptionForSlot(option)">
             {{ getOptionLabel(option) }}
diff --git a/src/scss/modules/_dropdown-option.scss b/src/scss/modules/_dropdown-option.scss
index 474746d..aa195c9 100644
--- a/src/scss/modules/_dropdown-option.scss
+++ b/src/scss/modules/_dropdown-option.scss
@@ -6,10 +6,7 @@
   clear: both;
   color: #333; /* Overrides most CSS frameworks */
   white-space: nowrap;
-
-  &:hover {
-    cursor: pointer;
-  }
+  cursor: pointer;
 }
 
 .vs__dropdown-option--highlight {
@@ -20,8 +17,5 @@
 .vs__dropdown-option--disabled {
   background: inherit;
   color: $vs-state-disabled-color;
-
-  &:hover {
-    cursor: inherit;
-  }
+  cursor: inherit;
 }
diff --git a/tests/unit/Selectable.spec.js b/tests/unit/Selectable.spec.js
index bfa0449..2c318a6 100644
--- a/tests/unit/Selectable.spec.js
+++ b/tests/unit/Selectable.spec.js
@@ -10,7 +10,7 @@ describe('Selectable prop', () => {
     Select.vm.$data.open = true
     await Select.vm.$nextTick()
 
-    Select.find('.vs__dropdown-menu li:first-child').trigger('mousedown')
+    Select.find('.vs__dropdown-menu li:first-child').trigger('click')
 
     await Select.vm.$nextTick()
     expect(Select.vm.selectedValue).toEqual(['one'])
@@ -25,7 +25,7 @@ describe('Selectable prop', () => {
     Select.vm.$data.open = true
     await Select.vm.$nextTick()
 
-    Select.find('.vs__dropdown-menu li:last-child').trigger('mousedown')
+    Select.find('.vs__dropdown-menu li:last-child').trigger('click')
     await Select.vm.$nextTick()
 
     expect(Select.vm.selectedValue).toEqual([])