Skip to content

Popover combined with Menu is not flipped when the content doesn't fit #7960

Open
0 of 5 issues completed
Open
@LittleCreamSoda

Description

@LittleCreamSoda

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

No one assigned

    Type

    Projects

    Status

    ✏️ To Groom

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions