You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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.
Open Example.tsx and surround the MenuTrigger element with <div style={{ marginBlock: "90vh" }}>...</div>, this makes the page scrollable.
Run npm start and open the project in a browser
Open the popover. If the issue does not occur, restart the browser.
If the issue still does not occur, add maxHeight={350} to Popover rendered inside the MenuTrigger function in MenuTrigger.tsx
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.
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
maxHeightprop is set onPopover, but I managed to reproduce it immediately with the Tailwind menu example, which doesn't set this prop.CleanShot.2026-06-09.at.15.45.55.mp4
Another reproduction (https://stackblitz.com/edit/z6fnt1to-rgblfgnn?file=package.json):
CleanShot.2026-06-09.at.14.35.06.mp4
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
ComboBoxorSelectwhich also usesPopoverinternally.Could it be related to: #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
MenuTailwind example (https://react-aria.adobe.com/Menu)Example.tsxand surround theMenuTriggerelement with<div style={{ marginBlock: "90vh" }}>...</div>, this makes the page scrollable.npm startand open the project in a browsermaxHeight={350}toPopoverrendered inside theMenuTriggerfunction inMenuTrigger.tsxI'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