search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
94.14k stars 32.35k forks source link

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

Open Studio384 opened 1 year ago

Studio384 commented 1 year ago

Duplicates

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 commented 1 year ago

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

PoliteVincent commented 5 months ago

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. :)