Menu component in dialog

[jamesopstad]

Is it OK to use the RAC Menu component inside aDialog component? I have a menu that should be contained in a popover on desktop but I'd like to render it inside a modal drawer (created with the Dialog component) on mobile so wanted to check if that's the correct approach. Thanks.

[snowystinger]

I wouldn't put the Menu inside a Dialog in order to create a Tray. Instead, I'd direct you to this section of our docs https://react-spectrum.adobe.com/react-aria/Popover.html#features where the last sentence says

Note: Popover only provides the overlay itself. It should be combined with Dialog to create fully accessible popovers. Other overlays such as menus may also be placed in a popover.

So I'd use Popover and just style it like a tray. You can find some sections on styling here: https://react-spectrum.adobe.com/react-aria/Modal.html#custom-overlay While this example is also a Dialog, you can apply the same ideas.

We also render our Menu as a tray on mobile in React Spectrum. You could have a look at how that has been implemented.
https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/menu/src/MenuTrigger.tsx#L77 The ideas are the same.

[devongovett]

I'd use Modal to implement a tray, not a Popover. Popovers do positioning relative to a trigger whereas modals do not. Rob is correct however that both modals and popovers may contain menus or dialogs directly, the menu does not need to be inside a dialog.

[snowystinger]

Ah, yes, sorry, I went to the wrong page https://react-spectrum.adobe.com/react-aria/Modal.html#features has the same line. Modal makes more sense for a Tray without the positioning relative to another element.

[jamesopstad]

Thanks. That's great. I hadn't spotted that Menu can be used directly inside Modal. It might be worth also mentioning that in the Menu page. Useful to see the approach of using a tray on mobile in React Spectrum too so thanks for the pointer.

[RobHannay]

Sorry to dredge an existing ticket but I have this issue too.

(For context, I'm back-porting react-aria into our existing, previously-hand-rolled component).

We have a "menu" that was never really a menu, so I'm just using a dialog trigger with a popover. However, one of the 'inner' bits of the modal is really a menu:

However, focus doesn't work properly as the dialog focus trap never allows the Menu to gain focus.

I've tried disabling shouldFocusWrap on the Menu to see if that would cause the Menu to be its own tab target, to no avail:

Screen.Recording.2024-06-19.at.17.17.15.mov

I guess one option would be to make the Back/Help buttons be part of the menu, or make none of the items menu items, but my preference for a11y would be that they are three distinct tab stops.

Any help would be greatly appreciated 🙏

[RobHannay]

also note it does actually focus the very first time it gets reached in the tab sequence, but not subsequently! Quite strange 🤔

[RobHannay]

Hovering the menu focussed it, and I can tab back to the other (Help/Back) buttons, but still get stuck there.

[RobHannay]

I've achieved the desired behaviour with ListBox/ListBoxItem. Perhaps that's the recommended approach

[snowystinger]

Thanks for updating and exploring some other options. ListBox is the recommended approach for this situation. 👍🏻