feat: make selectables clearable (#572)

hay-kot · Oct 6, 2023 · db16d3f · db16d3f
1 parent 1952b9f
commit db16d3f
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/frontend/components/Form/Autocomplete2.vue b/frontend/components/Form/Autocomplete2.vue
@@ -10,6 +10,14 @@
           class="w-full input input-bordered"
           @change="search = $event.target.value"
         />
+        <button
+          v-if="!!value"
+          type="button"
+          class="absolute inset-y-0 right-6 flex items-center rounded-r-md px-2 focus:outline-none"
+          @click="clear"
+        >
+          <Icon name="mdi-close" class="w-5 h-5" />
+        </button>
         <ComboboxButton class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
           <Icon name="mdi-chevron-down" class="w-5 h-5" />
         </ComboboxButton>
@@ -86,6 +94,10 @@
     multiple: false,
   });
 
+  function clear() {
+    emit("update:modelValue", null);
+  }
+
   const search = ref("");
   const value = useVModel(props, "modelValue", emit);