Problem faced: In the documentation's code (=/demo.tsx), the drawer is triggered and opens when the "Open" button is clicked at the top. However, I want the drawer to be triggered and opened when the drawer is clicked instead. (onClick function)

What I've tried: I've tried attaching the onClick function to StyledBox and SwipeableDrawer ponents (=/demo.tsx) but the onClick function is not triggered and nothing happens. I've also tried enveloping div tags within the ponent tags to trigger the DOM directly like:

<SwipeableDrawer>
    <div onClick={toggleDrawer(true)}></div>
</SwipeableDrawer>

What I need: If the documentation code (=/demo.tsx) can be modified so the drawer can be triggered when it is clicked on directly or a code snippet that works, that would be greatly appreciated.

Problem faced: In the documentation's code (https://codesandbox.io/s/cnvp4i?file=/demo.tsx), the drawer is triggered and opens when the "Open" button is clicked at the top. However, I want the drawer to be triggered and opened when the drawer is clicked instead. (onClick function)

What I've tried: I've tried attaching the onClick function to StyledBox and SwipeableDrawer ponents (https://codesandbox.io/s/cnvp4i?file=/demo.tsx) but the onClick function is not triggered and nothing happens. I've also tried enveloping div tags within the ponent tags to trigger the DOM directly like:

<SwipeableDrawer>
    <div onClick={toggleDrawer(true)}></div>
</SwipeableDrawer>

What I need: If the documentation code (https://codesandbox.io/s/cnvp4i?file=/demo.tsx) can be modified so the drawer can be triggered when it is clicked on directly or a code snippet that works, that would be greatly appreciated.

• javascript
• reactjs
• material-ui

2 Answers 2

Adding pointerEvents: "all" to the <StyledBox /> will capture the user events such as onClick in this case.

Also, you don't need a div inside <SwipeableDrawer />, all you need is to pass a prop onClick={toggleDrawer(!open)} to toggle the state of the drawer.

Codesandbox link

Note that in case you want to allow both open by click and open by touch drawing (e.g. to use the same drawer for touch and desktop devices) this is currently not possible. Touch drawing is disabled as soon as you put

<StyledBox
  sx={{
    ...
    pointerEvents: 'all',
  }}
>

See confirmation in https://github./mui/material-ui/issues/30805