[Bug]: Command and Combobox doesn't work inside of dialog.

[VlahdimyrLB]

Reproduction

Describe the bug

in the code below the combobox outisdie the dialog works, but the combobox inside of dialog doesnt

<script setup lang="ts">
import { Button } from '@/components/ui/button';
import {
    Combobox,
    ComboboxAnchor,
    ComboboxEmpty,
    ComboboxGroup,
    ComboboxInput,
    ComboboxItem,
    ComboboxItemIndicator,
    ComboboxList,
    ComboboxTrigger,
} from '@/components/ui/combobox';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { cn } from '@/lib/utils';
import { Check, ChevronsUpDown, Search } from 'lucide-vue-next';
import { ref } from 'vue';

const frameworks = [
    { value: 'next.js', label: 'Next.js' },
    { value: 'sveltekit', label: 'SvelteKit' },
    { value: 'nuxt', label: 'Nuxt' },
    { value: 'remix', label: 'Remix' },
    { value: 'astro', label: 'Astro' },
];

const value = ref<(typeof frameworks)[0]>();
</script>

<template>
    <div class="mx-auto flex items-center justify-center">
        <Combobox v-model="value" by="label">
            <ComboboxAnchor as-child>
                <ComboboxTrigger as-child>
                    <Button variant="outline" class="justify-between">
                        {{ value?.label ?? 'Select framework' }}

                        <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
                    </Button>
                </ComboboxTrigger>
            </ComboboxAnchor>

            <ComboboxList>
                <div class="relative w-full max-w-sm items-center">
                    <ComboboxInput class="h-10 rounded-none border-0 border-b focus-visible:ring-0" placeholder="Select framework..." />
                    <span class="absolute inset-y-0 start-0 flex items-center justify-center px-3">
                        <Search class="text-muted-foreground size-4" />
                    </span>
                </div>

                <ComboboxEmpty> No framework found. </ComboboxEmpty>

                <ComboboxGroup>
                    <ComboboxItem v-for="framework in frameworks" :key="framework.value" :value="framework">
                        {{ framework.label }}

                        <ComboboxItemIndicator>
                            <Check :class="cn('ml-auto h-4 w-4')" />
                        </ComboboxItemIndicator>
                    </ComboboxItem>
                </ComboboxGroup>
            </ComboboxList>
        </Combobox>

        <Dialog>
            <DialogTrigger> Edit Profile </DialogTrigger>
            <DialogContent>
                <DialogHeader>
                    <DialogTitle>Edit profile</DialogTitle>
                    <DialogDescription>
                        <Combobox v-model="value" by="label">
                            <ComboboxAnchor as-child>
                                <ComboboxTrigger as-child>
                                    <Button variant="outline" class="justify-between">
                                        {{ value?.label ?? 'Select framework' }}

                                        <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
                                    </Button>
                                </ComboboxTrigger>
                            </ComboboxAnchor>

                            <ComboboxList>
                                <div class="relative w-full max-w-sm items-center">
                                    <ComboboxInput
                                        class="h-10 rounded-none border-0 border-b focus-visible:ring-0"
                                        placeholder="Select framework..."
                                    />
                                    <span class="absolute inset-y-0 start-0 flex items-center justify-center px-3">
                                        <Search class="text-muted-foreground size-4" />
                                    </span>
                                </div>

                                <ComboboxEmpty> No framework found. </ComboboxEmpty>

                                <ComboboxGroup>
                                    <ComboboxItem v-for="framework in frameworks" :key="framework.value" :value="framework">
                                        {{ framework.label }}

                                        <ComboboxItemIndicator>
                                            <Check :class="cn('ml-auto h-4 w-4')" />
                                        </ComboboxItemIndicator>
                                    </ComboboxItem>
                                </ComboboxGroup>
                            </ComboboxList>
                        </Combobox>
                    </DialogDescription>
                </DialogHeader>

                <DialogFooter> Save changes </DialogFooter>
            </DialogContent>
        </Dialog>
    </div>
</template>

System Info

na

Contributes

• [ ] I am willing to submit a PR to fix this issue
• [ ] I am willing to submit a PR with failing tests