From 865661097c8f569cc091c9e24af8e11352a6b3d1 Mon Sep 17 00:00:00 2001
From: Matt Kilgore <matthew@kilgore.dev>
Date: Fri, 4 Oct 2024 13:31:06 -0400
Subject: [PATCH] fix: #181 MultiSelect can now be cleared manually.

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

diff --git a/frontend/components/Form/Multiselect.vue b/frontend/components/Form/Multiselect.vue
index 6b75ae0e..0680394f 100644
--- a/frontend/components/Form/Multiselect.vue
+++ b/frontend/components/Form/Multiselect.vue
@@ -8,6 +8,14 @@
         <span v-for="itm in value" :key="name != '' ? itm[name] : itm" class="badge">
           {{ name != "" ? itm[name] : itm }}
         </span>
+        <button
+          v-if="value.length > 0"
+          type="button"
+          class="absolute inset-y-0 right-6 flex items-center rounded-r-md px-2 focus:outline-none"
+          @click="clear"
+        >
+          <MdiClose class="size-5" />
+        </button>
       </div>
       <div
         tabindex="0"
@@ -36,6 +44,8 @@
 </template>
 
 <script lang="ts" setup>
+  import MdiClose from "~icons/mdi/close";
+
   const emit = defineEmits(["update:modelValue"]);
   const props = defineProps({
     label: {
@@ -78,6 +88,10 @@
     });
   });
 
+  function clear() {
+    value.value = [];
+  }
+
   const selected = computed<string[]>(() => {
     return value.value.map(itm => itm[props.uniqueField]);
   });