[joy-ui][Drawer][Menu] `Menu` appears underneath `Drawer` component

[Studio384]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/determined-carlos-glp97m?file=/src/Demo.tsx

Steps:

1. Add a Drawer
2. Add a Menu within that Drawer

Current behavior 😯

Clicking the MenuButton appears to do nothing because the Menu will be rendered underneath the Drawer.

Expected behavior 🤔

The Menu is listed on top of the Drawer.

Context 🔦

No response

Your environment 🌎

No response

[mnajdova]

I was able to fix this by adding sx={{ zIndex: 'modal' }} on the Menu component (see https://codesandbox.io/s/vigilant-tree-72fgxr?file=/src/Demo.tsx), however, I agree that this is not intuitive. @siriwatknp what's the recommendation for solving this internally? Have we thought about it? For e.g. it works by default in Material UI: https://codesandbox.io/s/funny-williams-pmwjvl?file=/src/index.tsx

[vincentToString]

Hi! When I was using BaseUI's 'Popper and Popup' I also realized this problem and then I found out that it might be the case of this issue. https://codesandbox.io/p/sandbox/cool-frog-zg95wy. I make the usage of Popper, popover from Material UI; Popper, popup from BaseUI. Here is my assumption of what is causing Joy UI's Menu not to show as expected as Material UI's Menu:

The Menu of Material UI is built on 'Modal' which has zIndex handling internally. However, the Menu for Joy UI is built on 'Popper' which has no zIndex handling internally. (which is also the reason why popper and popup in the sandbox cannot have their div showing on top of the drawer.

I make some adjustments to the Drawer.tsx within the mui-joy. However, I do not know how to test if my adjustment was effective or not. I am happy to have more discussion. :)