Android keyboard fix #50

vueform · Mar 30, 2021 · c11e5f9 · c11e5f9
1 parent b949ddb
commit c11e5f9
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 6 deletions.
diff --git a/dist/multiselect.global.js b/dist/multiselect.global.js
diff --git a/dist/multiselect.js b/dist/multiselect.js
diff --git a/dist/multiselect.vue2.global.js b/dist/multiselect.vue2.global.js
diff --git a/dist/multiselect.vue2.js b/dist/multiselect.vue2.js
diff --git a/src/Multiselect.vue b/src/Multiselect.vue
@@ -45,14 +45,17 @@
       <template v-if="mode !== 'tags' && searchable && !disabled">
         <div class="multiselect-search">
           <input    
-            v-model="search"
+            :modelValue="search"
+            :value="search"
             @focus.stop="openDropdown"
             @blur.stop="closeDropdown"
             @keyup.stop.esc="handleEsc"
             @keyup.stop.enter="selectPointer"
             @keydown.delete="handleSearchBackspace"
             @keydown.stop.up="backwardPointer"
             @keydown.stop.down="forwardPointer"
+            @keyup="handleSearchInput"
+            @select="handleSearchInput"
             ref="input"
           />
         </div>
@@ -81,7 +84,8 @@
             :style="{ width: tagsSearchWidth }"
           >
             <input    
-              v-model="search"
+              :modelValue="search"
+              :value="search"
               @focus.stop="openDropdown"
               @blur.stop="closeDropdown"
               @keyup.stop.esc="handleEsc"
@@ -90,6 +94,8 @@
               @keydown.delete="handleSearchBackspace"
               @keydown.stop.up="backwardPointer"
               @keydown.stop.down="forwardPointer"
+              @keyup="handleSearchInput"
+              @select="handleSearchInput"
               :style="{ width: tagsSearchWidth }"
               ref="input"
             />

diff --git a/src/composables/useKeyboard.js b/src/composables/useKeyboard.js
@@ -35,6 +35,10 @@ export default function useKeyboard (props, context, dependencies)
     }
   }
 
+  const handleSearchInput = (e) => {
+    search.value = e.target.value
+  }
+
   const handleAddTag = (e) => {
     if (e.keyCode === 13 && (addTagOn.value.indexOf('enter') !== -1 || !createTag.value)) {
       selectPointer()
@@ -49,6 +53,7 @@ export default function useKeyboard (props, context, dependencies)
     handleBackspace,
     handleEsc,
     handleSearchBackspace,
+    handleSearchInput,
     handleAddTag,
   }
 }