Is there a way to allow a popover to cover its trigger rather than scroll?

[paul-grant-hs]

We have this date picker component that launches a popover with a calendar when clicked. If there's not enough room for the calendar, I'd prefer that the popover cover the trigger before being forced to scroll; only having the scrollbar if the screen is literally not tall enough.

Is what I'm asking possible with usePopover?

[anntnzrb]

Can't see the image unfortunately, but I'll answer based on the question.

There's no direct prop to make the popover cover its trigger before scrolling. React Aria's usePopover positioning works like this:

1. Tries the requested placement first
2. If shouldFlip={true} (default), flips to opposite side when not enough room
3. Constrains maxHeight to fit within viewport/boundary
4. Scrolls content inside the popover if it still doesn't fit

Things you could try:

• shouldFlip={false} - prevents flipping, but doesn't help with scrolling
• containerPadding={0} - gives popover more room by reducing min distance from viewport edges
• boundaryElement - change the positioning boundary container

The "cover trigger before scrolling" behavior isn't built into the positioning algorithm — it prioritizes keeping the popover adjacent to (not overlapping) the trigger.

You'd likely need to either accept the scroll behavior, implement custom positioning outside usePopover, or open a feature request if you think this should be configurable.

[snowystinger]

You should be able to use offset={-measuredHeight} or something to that effect in order to have it overlap. Here's an example based off our Emoji picker in the our docs.
https://codesandbox.io/p/devbox/react-aria-starter-forked-pvx4xq

If you want it to cover entirely and not scroll, it may be a better alternative to consider using a Dialog in those cases.