[material-ui][Drawer] Issues when opening a Drawer within a list item

[ElliPetsava]

The problem in depth

I have a Drawer and I try to add the onClick event like: onClick={(event) => setDrawerOpen(!drawerOpen)} And it works The problem is that I have a List with ListItemButtons and every time I click to select a ListItem and then if the Drawer is open it closes and if it is closed it opens.

Your environment

System:
OS: Windows 10 10.0.19045
Binaries:
Node: 18.17.1 - C:\Program Files\nodejs\node.EXE npm: 10.0.0 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers: Chrome: Not Found Edge: Chromium (120.0.2210.133) npmPackages: @emotion/react: ^11.10.5 => 11.11.1 @emotion/styled: ^11.10.5 => 11.11.0 @mui/base: ^5.0.0-alpha.120 => 5.0.0-beta.11 @mui/core-downloads-tracker: 5.14.5 @mui/icons-material: ^5.11.11 => 5.14.3 @mui/lab: ^5.0.0-alpha.122 => 5.0.0-alpha.140 @mui/material: ^5.11.12 => 5.14.5 @mui/private-theming: 5.14.5 @mui/styled-engine: 5.13.2 @mui/system: 5.14.5 @mui/types: 7.2.4 @mui/utils: 5.14.5 @mui/x-data-grid: 6.11.2 @mui/x-data-grid-generator: ^6.0.1 => 6.11.2 @mui/x-data-grid-premium: ^6.0.0 => 6.11.2 @mui/x-data-grid-pro: 6.11.2 @mui/x-date-pickers: ^6.0.0 => 6.11.2 @mui/x-date-pickers-pro: ^6.0.0 => 6.11.2 @mui/x-license-pro: ^6.0.0 => 6.10.2 @types/react: 18.2.20 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0

Search keywords: Drawer Order ID: #67465

Search keywords:

[DiegoAndai]

Hey, @ElliPetsava, thanks for the report!

A minimal reproduction test case with the latest version would help a lot. A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[ElliPetsava]

Hey, @ElliPetsava, thanks for the report!

A minimal reproduction test case with the latest version would help a lot. A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

In our app we have implemented a side menu similar to the documentation example of 'Mini variant drawer'. [https://mui.com/material-ui/react-drawer/#mini-variant-drawer]

I want to toggle the drawer by clicking on it, instead of a hamburger button. ie. I click on the mini drawer (outside of a button) and it opens. I click on the expanded drawer and it returns to the minimized drawer state.

Is there a way to implement this? I will try to build an example of my implementation. I am also attaching some screenshots of the drawer and where I placed the event inside of the drawer

[DiegoAndai]

I think you can achieve what you're looking for by stopping propagation on the list item button components, for example:

<ListItemButton
    onClick={(event) => event.stopPropagation()}
/>

Here's a working example: https://stackblitz.com/edit/react-wiyrro?file=Demo.tsx

[ElliPetsava]

Thank you for the help.