Shadcn vue MultiSelect Dropdown Misalignment Issue in Custom Component

Question

I'm implementing a shadcn/ui Multiselect component in vue 3 for a form. https://www.shadcn-vue.com/docs/components/tags-input

But I'm encountering an issue with the dropdown menu's alignment. The dropdown appears misaligned relative to the input field.

When the dropdown opens, it does not align properly with the input field (or anchor). Instead, it either shifts too far to the left, right, or appears outside the expected container.

Component Details:

Form Usage:

<FormField v-slot="{ componentField }" name="roles">
  <FormItem>
    <FormLabel>Role</FormLabel>
    <FormControl>
      <MultiSelect
        v-bind="componentField"
        :options="frameworksList"
        :onValueChange="componentField.onChange"
        :defaultValue="componentField.modelValue"
        placeholder="Select options"
        variant="inverted"
        :animation="2"
        :maxCount="10"
      />
    </FormControl>
    <FormMessage />
  </FormItem>
</FormField>

Custom MultiSelect Implementation:

I use Radix Vue's Combobox for dropdown positioning. Here's a simplified version of the implementation:

<template>
  <TagsInput class="px-0 gap-0 w-full" :model-value="modelValue">
    <div class="flex gap-2 flex-wrap items-center px-3">
      <TagsInputItem
        v-for="item in selectedValues"
        :key="item"
        :value="item"
        as-child
      >
        <Badge :key="item">
          {{ getOption(item)?.label || item }}
          <XCircle
            class="ml-2 h-4 w-4 cursor-pointer"
            @click.stop="toggleOption(item)"
          />
        </Badge>
      </TagsInputItem>
    </div>
    <ComboboxRoot
      v-model="modelValue"
      v-model:open="open"
      v-model:search-term="searchTerm"
      class="w-full"
    >
      <ComboboxAnchor as-child>
        <ComboboxInput placeholder="Framework..." as-child>
          <TagsInputInput
            class="w-full px-3"
            :class="modelValue.length > 0 ? 'mt-2' : ''"
            @keydown.enter.prevent
            @focus="open = true"
          />
        </ComboboxInput>
      </ComboboxAnchor>
      <ComboboxPortal>
        <ComboboxContent as-child>
          <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>No results found</CommandEmpty>
            <CommandGroup>
              <CommandItem
                v-for="framework in filteredFrameworks"
                :key="framework.value"
                :value="framework.value"
                @select="toggleOption(framework.value)"
              >
                {{ framework.label }}
                <CheckIcon
                  v-if="selectedValues.includes(framework.value)"
                  class="ml-auto h-4 w-4"
                />
              </CommandItem>
            </CommandGroup>
          </CommandList>
        </ComboboxContent>
      </ComboboxPortal>
    </ComboboxRoot>
  </TagsInput>
</template>

The dropdown menu (ComboboxContent) should align directly below the input field. Instead, it appears offset (either horizontally or vertically). Adjusting CSS such as margin or padding hasn’t resolved the issue.

Here is the stackblitz example: https://stackblitz.com/edit/tdkd3r-rvzugw

How can I fix the dropdown alignment issue for the MultiSelect component It is a issue with a class being not properly used but I am not sure what class have been affecting positioning?