The Reach Menu isn't being triggered inside a React Aria Dialog.

[carlrobert-l]

Provide a general summary of the issue here

We recently started using the react-aria library for our overlays, and this has caused a bug that prevents the Reach menus from being triggered in the dialogs. The issue arises because the menus are rendered within portals, and my best guess is that react-aria maintains a focus lock on elements outside of the currently active overlay element.

Any ideas how to solve this?

🤔 Expected Behavior?

The menu can be opened in the modal/dialog.

😯 Current Behavior

Menu list is not visible after clicking on a menu button.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

https://codesandbox.io/p/devbox/jrt8hx

Version

latest

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Mac OS X

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

This is a tough one since many of our overlays manage/trap focus within themselves as you've discovered for accessibility reasons. Usually child overlays would be registered as child FocusScopes and thus focus could move from a parent overlay into the child overlay but this relies on said child calling/using FocusScope. 3rd party overlays won't do this by default of course and may have their own focus management that may clash with our own. We've discussed in the team in the past about perhaps allowing users to disable our focus management or register arbitrary elements as "ok to focus" but didn't land on anything yet. I don't suppose you can control where the Reach Menu gets portalled to?