Skip to content
Advertisement

Swipeable Drawer to open with onClick function (material ui)

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.

Answer

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

Advertisement