Can I help you

did you got any solution on this :( this is soo problematic

This is because of accessibility. If you want to keep the content outside of the dropdown interactive you can use modal={false} in DropdownMenu.Root

Try wrapping https://ui.shadcn.com/docs/components/scroll-area
It helped me

Try wrapping https://ui.shadcn.com/docs/components/scroll-area It helped me

I tried it, It's not helping

Does anyone have a better solution?

Does anyone have a better solution?

This works:

Just add <DropdownMenu modal={false}> and It'll work.

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

Found out just have height defined and overflow scroll class added worked for me, like this :
<DropdownMenuContent align="end" className="bg-white overflow-y-scroll h-96"

Does anyone have a better solution?

This works:

thanks

The cause is the <DropdownMenuPrimitive.Portal> in my case, when I put the DropdownMenu in Dialog (DialogContent) and I can't scroll inside the DropdownMenuContent (only possible by dragging the ScrollArea's ScrollBar with the mouse).

So I add a prop called isInsideDialog:

const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, isInsideDialog = false, ...props }, ref) => {
    const content = (
      <DropdownMenuPrimitive.Content
        ref={ref}
        sideOffset={sideOffset}
        className={cn(
          "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
          "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",
          className
        )}
        {...props}
      />
    );

    return isInsideDialog ? content : <DropdownMenuPrimitive.Portal>{content}</DropdownMenuPrimitive.Portal>;
  }
);
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName

When you're like me putting the DropdownMenu in Dialog for example, you can add this prop:

<DropdownMenuContent
    loop
    align="end"
    className="w-80"
    isInsideDialog={true} // TODO this is my fix
>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator/>
    <ScrollArea className="h-96">
        {/* Your DropdownMenuItem*/}
    </ScrollArea>
</DropdownMenuContent>  

Then it can scroll now.

I tried with the modal={false} also, but it doesn't work and I still cannot scroll when I put the DropdownMenu in DialogContent, that's why I had to remove the use of <DropdownMenuPrimitive.Portal>.

const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, isInsideDialog = false, ...props }, ref) => {
const content = (
<DropdownMenuPrimitive.Content
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
"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",
className
)}
{...props}
/>
);

return isInsideDialog ? content : <DropdownMenuPrimitive.Portal>{content}</DropdownMenuPrimitive.Portal>;

}
);
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName

Works, thanks

Shadcn should add the following properties to DropdownMenuContent

1. max-h-[var(--radix-dropdown-menu-content-available-height)]
2. overflow-y-auto

It would like this:

const DropdownMenuContent = React.forwardRef<
	React.ElementRef<typeof DropdownMenuPrimitive.Content>,
	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & { container?: HTMLElement | null }
>(({ className, sideOffset = 4, container, ...props }, ref) => (
	<DropdownMenuPrimitive.Portal container={container}>
		<DropdownMenuPrimitive.Content
			ref={ref}
			sideOffset={sideOffset}
			className={cn(
				'z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
				'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',
				className,
			)}
			{...props}
		/>
	</DropdownMenuPrimitive.Portal>
));
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;

With these properties, scrolling would be possible and the drop-down menu would take up the entire height available

Can someone open a PR for this?

I have created a PR myself. Also for the other components that open in a modal. Would be great if you could all support them 🙂