[bug]: Popover's scrollbar does not work in the Dialog component

[ConnorHu77]

Describe the bug

Popover's scrollbar does not work in the Dialog component

Affected component/components

Popover and Dialog

How to reproduce

'use client';

import { zodResolver } from '@hookform/resolvers/zod';
import { Check, ChevronsUpDown } from 'lucide-react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
import { Button } from '@/components/ui/button';
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';

import { cn } from '@/lib/utils';

import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from '@/components/ui/command';
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from '@/components/ui/form';
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@/components/ui/popover';

const languages = [
{ label: 'English', value: 'en' },
{ label: 'French', value: 'fr' },
{ label: 'German', value: 'de' },
{ label: 'Spanish', value: 'es' },
{ label: 'Portuguese', value: 'pt' },
{ label: 'Russian', value: 'ru' },
{ label: 'Japanese', value: 'ja' },
{ label: 'Korean', value: 'ko' },
{ label: 'Chinese', value: 'zh' },
] as const;

const FormSchema = z.object({
language: z.string({
required_error: 'Please select a language.',
}),
});

export function DialogText() {
const form = useForm<z.infer>({
resolver: zodResolver(FormSchema),
});

function onSubmit(data: z.infer) {}

return (


Edit Profile



Edit profile

Make changes to your profile here. Click save when you're done.


<Form {...form}>

<FormField
control={form.control}
name="language"
render={({ field }) => (

Language



<Button
variant="outline"
role="combobox"
className={cn(
'w-[200px] justify-between',
!field.value && 'text-muted-foreground',
)}
>
{field.value
? languages.find(
(language) => language.value === field.value,
)?.label
: 'Select language'}








No language found.

{languages.map((language) => (
<CommandItem
value={language.label}
key={language.value}
onSelect={() => {
form.setValue('language', language.value);
}}
>
{language.label}
<Check
className={cn(
'ml-auto',
language.value === field.value
? 'opacity-100'
: 'opacity-0',
)}
/>

))}






This is the language that will be used in the dashboard.



)}
/>
Submit



Save changes



);
}

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

mac

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[bruunand]

Have you tried to apply modal={true} to your Popover?