feat(select): support use backspace to delete tag

vexip-ui · Aug 2, 2022 · f05e8f4 · f05e8f4
1 parent 31d1cd8
commit f05e8f4
Showing 1 changed file with 14 additions and 1 deletion.
diff --git a/components/select/select.vue b/components/select/select.vue
@@ -51,6 +51,7 @@
                 role="combobox"
                 aria-autocomplete="list"
                 @input="handleFilterInput"
+                @keydown="handleBackspace"
               />
               <span ref="device" :class="nh.be('device')" aria-hidden="true">
                 {{ currentFilter }}
@@ -914,9 +915,20 @@ export default defineComponent({
 
           anchorWidth.value = range.getBoundingClientRect().width
         }
+
+        updatePopper()
       })
     }
 
+    function handleBackspace(event: KeyboardEvent) {
+      if (!input.value) return
+
+      if (event.key === 'Backspace' && !input.value.value && !isNull(currentValues.value.at(-1))) {
+        event.stopPropagation()
+        handleTagClose(currentValues.value.at(-1)!)
+      }
+    }
+
     return {
       props,
       nh,
@@ -957,7 +969,8 @@ export default defineComponent({
       handleClear,
       handleFocus,
       handleBlur,
-      handleFilterInput
+      handleFilterInput,
+      handleBackspace
     }
   }
 })