Menu popover not flipping
- 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 `
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
Assessment
This issue has not been assessed yet.