How to force another menu to open when one another is already opened?

[cedeber]

Hello everyone,

In this example: https://react-spectrum.adobe.com/react-aria/useMenuTrigger.html, if you duplicate the MenuButton component, once a menu is opened and you click on the second one (to open it), the first menu closes but the second menu stays closed. You need to click a second time to open the second menu.

I would like that the the second menu opens, whether the first menu is already opened or not. If the first menu is already opened, then it closes because you click outside.

Is it possible? And if yes then how please.
Thank you.

[cedeber]

Another remark: For what I have tested so far, it looks like there is some kind of event propagation cancellation because it behaves the same with other component (not done with react-aria).

Like closing another Popup when a react-aria menu is opened. When you click on the "close" button of the Popup, the menu closes but the Dialog remains.

[cedeber]

Looks like this was possible with @react-aria/[email protected]and @react-aria/[email protected]
Are #850, #1155, #1970 somehow related to that?

[snowystinger]

This is intentional. Only one overlay at a time can be open except in the case of nested overlays, for example, submenus or a menu in a dialog.
Future work will make the interaction pattern feel a bit more natural, which will prevent the hover effect and other interactions while an overlay is open. We decided it was worth fixing the two open overlays at once before we got to the rest. As you noted, there were a few bugs open about that exact problem.

[snowystinger]

This is how Mac native overlays work for reference

[cedeber]

I am not wanting to have 2 overlays at the same time (I agree this would be very bad), but I would like to have a single click that closes one overlay and opens a second one. This was working like this until @react-aria/menu v3.2.1 and @react-aria/overlays v3.6.3.

In addition the current code breaks other UI behavior, which is another issue in my point of view (explained earlier).

[snowystinger]

I am not sure I follow your other point. I assume you mean this?

Like closing another Popup when a react-aria menu is opened. When you click on the "close" button of the Popup, the menu closes but the Dialog remains.

Can you share a codesandbox to demonstrate what you mean?

We found that there were many problems allowing a single click to both close an overlay and open a new one, such as race conditions where two overlays would end up open at once. We are basing our behavior off native, if you are on a Mac, you can try this out. Go to System Preferences -> Language & Region, then open a select, then try to open a second select while the first one is open. The first click will close and the second will open. Again, we have another change coming down the pipeline that will disable interactions such as hover to make it more apparent to the user that they aren't actually interacting with the elements in the background.