Multi Select Component

[Uhasith]

I used Combobox and TagsInput to create my own multi-select component. However, CommandList and CommandItem do not work inside a dialog modal. I am unable to select or search items, and selecting an item does not trigger the event. Below, I will post my code—could you suggest a solution? It works perfectly inside regular components; the issue only occurs within dialog modals.

Can anyone suggest a solution for this ?

<script setup>
import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/Components/ui/command'
import { TagsInput, TagsInputInput } from '@/Components/ui/tags-input'
import { Badge } from '@/Components/ui/badge'
import { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
import { computed, ref } from 'vue'
import { ChevronDownIcon, X } from 'lucide-vue-next'

const props = defineProps({
    placeholder: {
        type: String,
        required: false
    },
    options: {
        type: Array,
        required: false,
        default: () => []
    }
});

const modelValue = defineModel('modelValue')
const open = ref(false)
const searchTerm = ref('')

const filteredOptions = computed(() => {
    return props.options.filter(i => !modelValue.value.includes(i.value));
});

const findLabelById = (id) => {
    const option = props.options.find(opt => opt.value === id);
    return option ? option.label : 'Unknown';
};

// Toggle function for the popover
const toggleOpen = () => {
    open.value = !open.value
}

const handleRemove = (value) => {
    // console.log(label)
    modelValue.value = modelValue.value.filter(i => i !== value)
}
</script>

<template>
    <div>
        <TagsInput class="px-0 gap-0 w-full cursor-pointer relative" :model-value="modelValue">
            <ChevronDownIcon class="cursor-pointer size-4 mr-3 absolute right-0" @click="toggleOpen" />
            <ComboboxRoot v-model="modelValue" v-model:open="open" v-model:search-term="searchTerm" class="w-full">
                <ComboboxAnchor as-child>
                    <div class="flex items-center justify-end w-full">
                        <ComboboxInput :placeholder="props.placeholder" as-child>
                            <TagsInputInput class="w-full px-3 border-0 focus:ring-0 py-0"
                                :class="modelValue.length > 0 ? '' : ''" @keydown.enter.prevent @focus="toggleOpen" />
                        </ComboboxInput>
                    </div>
                </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">
                            <CommandEmpty />
                            <CommandGroup>
                                <CommandItem v-for="option in filteredOptions" :key="option.value" :value="option.value"
                                    @select.prevent="(ev) => {
                                        if (modelValue.includes(ev.detail.value)) {
                                            return
                                        } else {
                                            modelValue.push(ev.detail.value)
                                        }
                                        if (filteredOptions.length === 0) {
                                            open = false
                                        }
                                    }">
                                    {{ option.label }}
                                </CommandItem>
                            </CommandGroup>
                        </CommandList>
                    </ComboboxContent>
                </ComboboxPortal>
            </ComboboxRoot>
        </TagsInput>
        <div v-if="modelValue.length > 0" class="flex gap-2 flex-wrap items-center px-3 py-3">
            <div class="flex items-center gap-2" v-for="item in modelValue" :key="item">
                <Badge class="gap-2 py-1 px-2 bg-green1">
                    <!-- Find and display the label based on item (id) -->
                    {{ findLabelById(item) }}
                    <X class="cursor-pointer size-3" @click="handleRemove(item)" />
                </Badge>
            </div>
        </div>
    </div>
</template>

[GorillaWarHead]

here is an example that i did its not perfect but its working
if someone has some improvements feel free to share with us

<script setup lang="ts">
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import {
  TagsInput,
  TagsInputInput,
  TagsInputItem,
  TagsInputItemDelete,
  TagsInputItemText,
} from "@/components/ui/tags-input";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { Check, ChevronsUpDown } from "lucide-vue-next";
import { ref, watch } from "vue";

const props = defineProps<{
  options: Array<{ [key: string]: string }>;
  text?: string;
  value?: string;
  placeholder?: string;
}>();

// Provide default values for text and value props
const textKey = props.text || "text";
const valueKey = props.value || "value";

const open = ref(false);

const emit = defineEmits(["update:modelValue"]);

// Define the model value
const modelValue = defineModel<string[]>({
  required: true,
});

// Function to handle selection
const handleSelect = (selectedValue: string) => {
  const currentValue = [...(modelValue.value || [])];
  if (!currentValue.includes(selectedValue)) {
    currentValue.push(selectedValue);
  } else {
    const index = currentValue.indexOf(selectedValue);
    currentValue.splice(index, 1);
  }
  modelValue.value = currentValue;
  emit("update:modelValue", currentValue);
};

// Function to handle removal
const handleRemove = (keyToRemove: string) => {
  const newValue = (modelValue.value || []).filter(
    (item) => item !== keyToRemove
  );
  modelValue.value = newValue;
  emit("update:modelValue", newValue);
};

// Function to get display text for a value
const getDisplayText = (value: string) => {
  const option = props.options.find(
    (opt) => opt[valueKey as keyof typeof opt] == value
  );
  return option ? option[textKey as keyof typeof option] : value;
};

// Watch for external changes to modelValue
watch(
  () => modelValue.value,
  (newValue) => {
    if (newValue !== modelValue.value) {
      emit("update:modelValue", newValue);
    }
  },
  { deep: true }
);
</script>

<template>
  <div>
    <Popover v-model:open="open">
      <PopoverTrigger as-child>
        <TagsInput>
          <TagsInputItem
            v-for="item in modelValue"
            :key="item"
            :value="item"
            @remove="handleRemove(item)"
          >
            <span class="truncate p-1">
              {{ getDisplayText(item) }}
            </span>
            <TagsInputItemDelete />
          </TagsInputItem>
          <TagsInputInput
            :placeholder="placeholder"
            v-if="!modelValue?.length"
          />
          <!-- <ChevronsUpDown class="ml-2 size-4" /> -->
        </TagsInput>
      </PopoverTrigger>
      <PopoverContent class="p-0" align="start">
        <Command class="p-0">
          <CommandInput class="h-9" placeholder="Search items..." />
          <CommandEmpty>No items found.</CommandEmpty>
          <CommandList>
            <CommandGroup>
              <CommandItem
                v-for="option in options"
                :key="option[valueKey]"
                :value="option[textKey]"
                @select.prevent="handleSelect(option[valueKey].toString())"
              >
                <span>{{ option[textKey as keyof typeof option] }}</span>
                <Check
                  v-if="modelValue?.includes(option[valueKey].toString())"
                  class="ml-auto h-4 w-4"
                />
              </CommandItem>
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  </div>
</template>

you need to add this style to PopoverContent.vue

<template>
  <PopoverPortal>
    <PopoverContent
      v-bind="{ ...forwarded, ...$attrs }"
      :class="
        cn(
          'PopoverContent z-50 w-72 rounded-md border bg-popover p-4 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',
          props.class
        )
      "
      :side-offset="5"
    >
      <slot />
    </PopoverContent>
  </PopoverPortal>
</template>

<style scoped>
.PopoverContent {
  width: var(--radix-popover-trigger-width);
  max-height: var(--radix-popover-content-available-height);
}
</style>