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.

[yoosion030]

Scrolling still does not work in the iPad Chrome environment.
Has anyone experienced the same phenomenon as me?

[krishnagkmit]

Scrolling still does not work in the iPad Chrome environment. Has anyone experienced the same phenomenon as me?

working for me
is there a specific way to reproduce the effect?

[andreidionisie]

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.

@panzacoder , did you find the answer? I faced the similar issue.

[oxuk85]

Has anyone overcome this issue when the popover is part of a modal/dialog?

I had the property modal={true} already set so I am not sure what the fix would be.

Any help would be much appreciated!

<Popover modal open={popoverOpen} onOpenChange={setPopoverOpen}>
  ...
  <PopoverContent className="w-auto p-2" align="center">
    <ScrollArea className={"[&>[data-radix-scroll-area-viewport]]:max-h-[300px]" >
    ...
    </ScrollArea>
  </PopoverContent>
</Popover>

[trungsky]

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

Thanks! It works

[MonaroDaniel]

It worked, thanks