Menus within Modals (Dialogs)

[Southclaws]

I'm trying to get a Menu component working inside a Dialog, the first roadblock I hit was that the default z-index for Menu seems to be "dropdown" (1000) which is lower than "modal" (1400) so I fixed that by changing the Menu recipe to use "popover" (1500) for the z-index, after this fix the Menu is now correctly rendering on top of Dialog components instead of behind.

But now, whenever I mouse-over the items in the menu, or click anywhere in the <Menu.Content>, it closes. I'm not sure what's going on or even where, it could be any one of: Zag, Ark, Panda or Park (separation of concerns can be exhausting!)

Any ideas? I've just recently upgraded Ark and Panda to their latest versions (which in turn upgrades Zag too) so I'm unsure what's causing this.

[dannylin108]

I found similar bug for touch devices

chakra-ui/ark#2816

[segunadebayo]

This is more of a layering or DOM issue. It sounds like the menu component is portalled as well.

I recommend portalled just the dialog and leave the menu within the dialog (non-portalled). That way, you don't have to fix z-index related issues.