adobe / adobe/react-spectrum

Menu popover not flipping

Open
#10,176 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the issue here

I'm encountering issues with the menu popover not flipping when the trigger is nearing the bottom edge of the screen. Instead it will shrink the popover and make it scrollable, but the area is too small. At first I thought this was only happening when the `maxHeight` prop is set on `Popover`, but I managed to reproduce it immediately with the Tailwind menu example, which doesn't set this prop.

https://github.com/user-attachments/assets/06247122-1457-4f32-9d59-761d94feeed1

Another reproduction (https://stackblitz.com/edit/z6fnt1to-rgblfgnn?file=package.json):

https://github.com/user-attachments/assets/dff043f5-a503-4801-84fa-149d584480f3

I'm not always able to reproduce it, sometimes it's fixed for awhile and I need to restart Chrome for it to happen again. I've not seen it happen with `ComboBox` or `Select` which also uses `Popover` internally.

Could it be related to: https://github.com/adobe/react-spectrum/issues/7960?

### 🤔 Expected Behavior?

The menu popover should flip to the top when it's nearing the bottom edge of the screen and there's enough space on top.

### 😯 Current Behavior

The menu popover shrinks and renders below, making it too small to be usable.

### 💁 Possible Solution

_No response_

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

1. Download the `Menu` Tailwind example (https://react-aria.adobe.com/Menu)
2. Open `Example.tsx` and surround the `MenuTrigger` element with `

...
`, this makes the page scrollable.
3. Run `npm start` and open the project in a browser
4. Open the popover. If the issue does not occur, restart the browser.
5. If the issue still does not occur, add `maxHeight={350}` to `Popover` rendered inside the `MenuTrigger` function in `MenuTrigger.tsx`
6. Restart the browser and open the popover

I've also implemented a reproduction in Stackblitz: https://stackblitz.com/edit/z6fnt1to-rgblfgnn?file=package.json. But the bug is really flaky, sometimes I'm able to reproduce it here, and other times I'm not. There is definitely an issue here though, because my colleague was also able to reproduce it in Firefox.

### Version

React Aria Components 1.18.0

### What browsers are you seeing the problem on?

Chrome

### If other, please specify.

_No response_

### What operating system are you using?

macOS 26

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.