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.
Advertisement
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.