[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<typeof FormSchema>>({ resolver: zodResolver(FormSchema), });

function onSubmit(data: z.infer<typeof FormSchema>) {}

return ( <Dialog> <DialogTrigger asChild> <Button variant="outline">Edit Profile</Button> </DialogTrigger> <DialogContent className="sm:max-w-[425px]"> <DialogHeader> <DialogTitle>Edit profile</DialogTitle> <DialogDescription> Make changes to your profile here. Click save when you're done. </DialogDescription> </DialogHeader> <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6"> <FormField control={form.control} name="language" render={({ field }) => ( <FormItem className="flex flex-col"> <FormLabel>Language</FormLabel> <Popover> <PopoverTrigger asChild> <FormControl> <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'} <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> </Button> </FormControl> </PopoverTrigger> <PopoverContent className="w-[200px] p-0"> <Command> <CommandInput placeholder="Search language..." /> <CommandList> <CommandEmpty>No language found.</CommandEmpty> <CommandGroup> {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', )} /> </CommandItem> ))} </CommandGroup> </CommandList> </Command> </PopoverContent> </Popover> <FormDescription> This is the language that will be used in the dashboard. </FormDescription> <FormMessage /> </FormItem> )} /> <Button type="submit">Submit</Button> </Form> <DialogFooter> <Button type="submit">Save changes</Button> </DialogFooter> </DialogContent> </Dialog> ); }

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

mac

Before submitting

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

[bruunand]

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

[shadcn]

This issue has been automatically marked as stale due to one year of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you. (This is an automated message)

[shadcn]

This issue has been automatically closed due to one year of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding! (This is an automated message)