ScrollArea not working inside a Popover

[mattiaz9]

This is a code example:

<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent>
    <ScrollArea className="flex max-h-16 flex-col" type="always">
      <div className="h-[800px] bg-red-500" />
    </ScrollArea>
  </PopoverContent>
</Popover>

The scrollbar appears but the scroll isn't working inside the content, only when i'm hovering over the scrollbar itself.

[brooksa-chemtest]

I've found I have to set a height value for this to work. Try with just 'h-16' as a className.

Scrolling with the mouse wheel doesn't seem to work though.

[mattiaz9]

Personally I fixed it by setting modal={true} to the Popover. It's a weird behaviour I have to say..

[j-fdion]

I had the same problem but reversed, a popover inside a scrollarea would not stay open. Using the setting modal={true} as stated by @mattiaz9 was my solution.

[henriqueup]

Had the same problem using Commad and CommandList inside Popover. I had set overflow-y-auto and a max height on the CommandList. The scroll bar was showing and I could drag it, but scroll wheel was not working. When I pass modal={true} to the Popover, it scrolls normally. Setting height in CommandList didn't solve the problem.

[undesicimo]

@mattiaz9 Thank you for this. setting Popover to modal fixed it for me as well

[mamlzy]

Personally I fixed it by setting modal={true} to the Popover. It's a weird behaviour I have to say..

Thank you so much, it works

[mununki]

@mattiaz9 Thanks! It works.

[zwergdev]

@mattiaz9 thanks!

<Popover modal> 
  ....
    <ScrollArea>
      <CommandGroup>
        ....
      </CommandGroup>
    </ScrollArea>
  ....
</Popover>

[SergiuPlesco]

Try using "h-" instead of "max-h-" for setting the height of a scroll area.

[roylee0704]

if i have an empty list, "h-" wouldn't make sense.

I would love to be able to use "max-h-" unfortunately Its not working.

[ArmandFrvr]

For max-h, it needs to be set on the radix viewport, like this: <ScrollArea className={'[&>[data-radix-scroll-area-viewport]]:max-h-[300px]'}>

[mardrof]

@ArmandFrvr thanks for the solution. For me it works like a charm :)

[krishnagkmit]

I had the same problem but reversed, a popover inside a scrollarea would not stay open. Using the setting modal={true} as stated by @mattiaz9 was my solution.

it worked for me, thanks @mattiaz9

[rafizuaf]

Personally I fixed it by setting modal={true} to the Popover. It's a weird behaviour I have to say..

thanks. worked for me

[iyy0v]

Personally I fixed it by setting modal={true} to the Popover. It's a weird behaviour I have to say..

Worked for me, thanks!

[panzacoder]

Adding modal to Popover "works" for scrolling, but is a bad solution for my use-case.

I'm using Popover with a Scroll Area for search results that appear as you are typing. I can prevent focus from being pulled into the popover but if focus is given to the popover at all (by scroll, tapping, etc), I can no longer re-focus on my input, because the modal flag disables interaction everywhere else on the page.

[mikechabotcandy]

I can confirm the solution posted by @ArmandFrvr works when the ScrollArea is nested within a Drawer.

[MehrdadArman]

Personally I fixed it by setting modal={true} to the Popover. It's a weird behaviour I have to say..

Thank you for your solution it worked for me like a charm :)

[shadcn]

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.

[mamunur13525]

Personally I fixed it by setting modal={true} to the Popover. It's a weird behaviour I have to say..

Thanks. It works for me.