From db16d3fb23cf824e04c840d877861801d80297bf Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Fri, 6 Oct 2023 16:32:49 -0500
Subject: [PATCH] feat: make selectables clearable (#572)

---
 frontend/components/Form/Autocomplete2.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/frontend/components/Form/Autocomplete2.vue b/frontend/components/Form/Autocomplete2.vue
index b71c30e..9b20758 100644
--- 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);