gsadmin/libredesk
1
0
Fork 0
mirror of https://github.com/abhinavxd/libredesk.git synced 2026-09-24 03:16:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Close dropdown on outside click in SelectTag component

Browse Source
This commit is contained in:
Abhinav Raut
2025-03-10 02:35:56 +05:30
parent 1ff7317c4d
commit fd4e47dc68
1 changed files with 46 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ui/select/SelectTag.vue
+46 -12
View File
@@ -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>
</script>