Description
Provide a general summary of the issue here
Recently I've encountered a weird behaviour of the Popover component. Having both Menu component and any other html element inside of a popover results in an incorrect calculation of popover's maxHeight and position. You can see that while opening a popover near the bottom of a viewport.
Screen.Recording.2025-03-19.at.14.45.09.mov
🤔 Expected Behavior?
Popover position should be flipped to the opposite direction and all of the popover's content should be visible.
😯 Current Behavior
Part of the Popover's content is not visible
💁 Possible Solution
Probably have something to do with calculatePositionInternal
function
🔦 Context
I have a list of items each having a button that opens up a popover with menu and some extra information. I've noticed that items which are close to the page bottom rendering their popover incorrectly (at the bottom of the trigger) instead of the trigger's top. As a result part of the popover is not visible for a user. This behaviour is observed only when the Popover has both the Menu and any other element inside of it. If the Popover has only the Menu component or any layout without a Menu everything works just fine
🖥️ Steps to Reproduce
https://codesandbox.io/p/sandbox/react-aria-popover-6y7k6k
Version
react-aria-components: 1.7.1
What browsers are you seeing the problem on?
Chrome
If other, please specify.
No response
What operating system are you using?
macOS
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
Sub-issues
Metadata
Metadata
Assignees
Labels
Type
Projects
Status