From fd4e47dc680b2139ffdd09063cf1db7319a4395b Mon Sep 17 00:00:00 2001
From: Abhinav Raut <abhinavrautcs@gmail.com>
Date: Mon, 10 Mar 2025 02:35:56 +0530
Subject: [PATCH] fix: Close dropdown on outside click in SelectTag component

---
 .../src/components/ui/select/SelectTag.vue    | 58 +++++++++++++++----
 1 file changed, 46 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/ui/select/SelectTag.vue b/frontend/src/components/ui/select/SelectTag.vue
index 9a6adbe9..f62c3008 100644
--- a/frontend/src/components/ui/select/SelectTag.vue
+++ b/frontend/src/components/ui/select/SelectTag.vue
@@ -6,20 +6,37 @@
         <TagsInputItemDelete />
       </TagsInputItem>
     </div>
-    <ComboboxRoot :model-value="tags" v-model:open="open" v-model:search-term="searchTerm" class="w-full">
+    <ComboboxRoot
+      ref="comboboxRef"
+      :model-value="tags"
+      v-model:open="open"
+      v-model:search-term="searchTerm"
+      class="w-full"
+    >
       <ComboboxAnchor as-child>
         <ComboboxInput :placeholder="placeholder" as-child>
-          <TagsInputInput class="w-full px-3" :class="tags.length > 0 ? 'mt-2' : ''" @keydown.enter.prevent
-            @blur="handleBlur" />
+          <TagsInputInput
+            class="w-full px-3"
+            :class="tags.length > 0 ? 'mt-2' : ''"
+            @keydown.enter.prevent
+            @blur="handleBlur"
+          />
         </ComboboxInput>
       </ComboboxAnchor>
       <ComboboxPortal>
         <ComboboxContent>
-          <CommandList position="popper"
-            class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">
+          <CommandList
+            position="popper"
+            class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+          >
             <CommandEmpty />
             <CommandGroup>
-              <CommandItem v-for="item in filteredOptions" :key="item" :value="item" @select="handleSelect">
+              <CommandItem
+                v-for="item in filteredOptions"
+                :key="item"
+                :value="item"
+                @select="handleSelect"
+              >
                 {{ item }}
               </CommandItem>
             </CommandGroup>
@@ -32,10 +49,23 @@
 
 <script setup>
 import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/components/ui/command'
-import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/components/ui/tags-input'
-import { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
+import {
+  TagsInput,
+  TagsInputInput,
+  TagsInputItem,
+  TagsInputItemDelete,
+  TagsInputItemText
+} from '@/components/ui/tags-input'
+import {
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxInput,
+  ComboboxPortal,
+  ComboboxRoot
+} from 'radix-vue'
 import { computed, ref } from 'vue'
 import { useField } from 'vee-validate'
+import { onClickOutside } from '@vueuse/core'
 
 const tags = defineModel({
   required: false,
@@ -64,10 +94,14 @@ const { handleBlur } = useField(() => props.name, undefined, {
 
 const open = ref(false)
 const searchTerm = ref('')
+const comboboxRef = ref(null)
 
-const filteredOptions = computed(() =>
-  props.items.filter(item => !tags.value.includes(item))
-)
+// Close dropdown when clicking outside
+onClickOutside(comboboxRef, () => {
+  open.value = false
+})
+
+const filteredOptions = computed(() => props.items.filter((item) => !tags.value.includes(item)))
 
 const handleSelect = (event) => {
   if (event.detail.value) {
@@ -81,4 +115,4 @@ const handleSelect = (event) => {
     open.value = false
   }
 }
-</script>
\ No newline at end of file
+</script>