Swipeable Drawer to open with onClick function (material ui)

user_13714014 0
Viewed 281

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 components (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 component 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.

material-ui reactjs javascript
2 Answers

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

user_81381920

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.com/mui/material-ui/issues/30805

user_91217420
Related