Merge pull request #2 from howard-tzw/dev

Fix mobile selection bug

Author: howard-tzw

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.3](https://github.com/howard-tzw/vue3-select/compare/v0.0.2...v0.0.3) (2023-05-09)
+
+
+### Bug Fixes
+
+* fix mobile selection bug ([11f34ce](https://github.com/howard-tzw/vue3-select/commit/11f34ce7d5f43e654bbba0bd1791c586f98f21ba))
+
 ### [0.0.2](https://github.com/howard-tzw/vue3-select/compare/v4.0.0-beta.6...v0.0.2) (2023-05-04)
 
 

bower.json

@@ -29,5 +29,5 @@
     "test",
     "tests"
   ],
-  "version": "0.0.2"
+  "version": "0.0.3"
 }

dev/Dev.vue

@@ -1,6 +1,10 @@
 <template>
   <div id="app">
+    <p>searchable</p>
     <v-select v-model="selected" v-bind="config" />
+
+    <p>unsearchable</p>
+    <v-select v-model="selected" v-bind="config" :searchable="false" />
   </div>
 </template>
 
@@ -30,7 +34,8 @@ body {
 #app {
   height: 100%;
   max-width: 20rem;
-  margin: 10rem auto 0;
+  margin: 0 auto;
+  padding: 10px;
 }
 
 hr {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-select",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "A maintained fork of vue-select for Vue 3",
   "author": "Jeff Sagal <sagalbot@gmail.com>, Howard Chen <howard.tzw@gmail.com>",
   "homepage": "https://vue-select.org",

src/components/Select.vue

@@ -987,7 +987,7 @@ export default {
 
   methods: {
     clickOutside() {
-      if (this.open) {
+      if (this.open && !this.searchable) {
         this.open = false
       }
     },
@@ -1129,11 +1129,12 @@ export default {
 
       if (this.open && targetIsNotSearch) {
         this.searchEl.blur()
+      } else if (this.open && !targetIsNotSearch && !this.searchable) {
+        this.open = false
       } else if (!this.disabled) {
+        this.open = true
         this.searchEl.focus()
       }
-
-      this.open = !this.open
     },
 
     /**
@@ -1271,6 +1272,7 @@ export default {
      * @return {void}
      */
     onSearchBlur() {
+      this.open = false
       if (this.mousedown && !this.searching) {
         this.mousedown = false
       } else {
@@ -1294,6 +1296,7 @@ export default {
      * @return {void}
      */
     onSearchFocus() {
+      this.open = true
       this.$emit('search:focus')
     },
 

src/css/modules/search-input.css

@@ -6,37 +6,41 @@
  * If it's up here on it's own, it'll hide it.
  */
 .vs__search::-webkit-search-cancel-button {
-    display: none;
+  display: none;
 }
 
 .vs__search::-webkit-search-decoration,
 .vs__search::-webkit-search-results-button,
 .vs__search::-webkit-search-results-decoration,
 .vs__search::-ms-clear {
-    display: none;
+  display: none;
 }
 
 .vs__search,
 .vs__search:focus {
-    color: var(--vs-search-input-color);
-    appearance: none;
-    line-height: var(--vs-line-height);
-    font-size: var(--vs-font-size);
-    border: 1px solid transparent;
-    border-left: none;
-    outline: none;
-    margin: 4px 0 0 0;
-    padding: 0 7px;
-    background: none;
-    box-shadow: none;
-    width: 0;
-    max-width: 100%;
-    flex-grow: 1;
-    z-index: 1;
+  /* disable the quick blinking effect when the input has been hit */
+  /* refer to https://stackoverflow.com/questions/3516173/ipad-safari-how-to-disable-the-quick-blinking-effect-when-a-link-has-been-hit */
+  -webkit-tap-highlight-color: transparent;
+
+  color: var(--vs-search-input-color);
+  appearance: none;
+  line-height: var(--vs-line-height);
+  font-size: var(--vs-font-size);
+  border: 1px solid transparent;
+  border-left: none;
+  outline: none;
+  margin: 4px 0 0 0;
+  padding: 0 7px;
+  background: none;
+  box-shadow: none;
+  width: 0;
+  max-width: 100%;
+  flex-grow: 1;
+  z-index: 1;
 }
 
 .vs__search::placeholder {
-    color: var(--vs-search-input-placeholder-color);
+  color: var(--vs-search-input-placeholder-color);
 }
 
 /**
@@ -45,17 +49,17 @@
 
 /* Unsearchable */
 .vs--unsearchable {
-    .vs__search {
-        opacity: 1;
-    }
-    &:not(.vs--disabled) .vs__search {
-        cursor: pointer;
-    }
+  .vs__search {
+    opacity: 1;
+  }
+  &:not(.vs--disabled) .vs__search {
+    cursor: pointer;
+  }
 }
 
 /* Single, when searching but not loading or open */
 .vs--single.vs--searching:not(.vs--open):not(.vs--loading) {
-    .vs__search {
-        opacity: 0.2;
-    }
+  .vs__search {
+    opacity: 0.2;
+  }
 }

src/directives/clickOutside.js

@@ -7,17 +7,17 @@ export default {
         binding.value(event)
       }
     }
-    const clickHandler =
-      'ontouchstart' in document.documentElement ? 'touchstart' : 'click'
+    // const clickHandler =
+    //   'ontouchstart' in document.documentElement ? 'touchstart' : 'click'
     setTimeout(() => {
-      document.addEventListener(clickHandler, el.clickOutsideEvent)
+      document.addEventListener('click', el.clickOutsideEvent)
     }, 0)
   },
   unmounted: (el) => {
     const clickOutsideEvent = el.clickOutsideEvent
     delete el.clickOutsideEvent
-    const clickHandler =
-      'ontouchstart' in document.documentElement ? 'touchstart' : 'click'
-    document.removeEventListener(clickHandler, clickOutsideEvent)
+    // const clickHandler =
+    //   'ontouchstart' in document.documentElement ? 'touchstart' : 'click'
+    document.removeEventListener('click', clickOutsideEvent)
   },
 }