Repository navigation
[SwipeableDrawer] Buttons and other interactable components prevent opening a Swipeable edge drawer. #30805
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
On mobile, when there is a button, slider, checbox etc... as part of the swipeable drawer edge (Demo), you cannot click on them, due to them inheriting the pointer-events: none style.
Forcefully overriding it to the pointer-events: all allows you to now click on the components, but can no longer open the draw when dragging with them.
Expected behavior 🤔
You should be able to swipe to open the drawer, and also interact with the components in the edge component.
Steps to reproduce 🕹
Please see demo:
Requires mobile touch emulation in order to see the effects:
https://codesandbox.io/p/devbox/swipeableedgedrawer-material-demo-forked-y8hw46
Context 🔦
We have a swipeable edge drawer, that is really hard to open due to having a large button in it.
I have already identified and come up with a solution in my PR.
Your environment 🌎
`npx @mui/envinfo`
System:
OS: Windows 10 10.0.19042
CPU: (12) x64 AMD Ryzen 5 2600X Six-Core Processor
Memory: 6.90 GB / 15.93 GB
Binaries:
Node: 14.17.6 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
Managers:
Composer: 1.8.6 - C:\ProgramData\ComposerSetup\bin\composer.BAT
pip2: 20.2.2 - C:\Program Files (x86)\Python27-18\Scripts\pip2.EXE
pip3: 19.0.3 - C:\Program Files (x86)\Python37-32\Scripts\pip3.EXE
Utilities:
Git: 2.31.1.
Virtualization:
Docker: 20.10.6 - C:\Program Files\Docker\Docker\resources\bin\docker.EXE
SDKs:
Windows SDK:
AllowDevelopmentWithoutDevLicense: Enabled
AllowAllTrustedApps: Enabled
Versions: 10.0.17763.0, 10.0.18362.0, 10.0.19041.0
IDEs:
VSCode: 1.63.2 - C:\Program Files\Microsoft VS Code\bin\code.CMD
Visual Studio: 16.11.31702.278 (Visual Studio Community 2019)
Languages:
Bash: 5.0.17 - C:\Windows\system32\bash.EXE
PHP: 7.3.7 - C:\PHP7\php.EXE
Python: 2.7.18
Browsers:
Chrome: 97.0.4692.99
Edge: Spartan (44.19041.1266.0), Chromium (97.0.1072.69)
Internet Explorer: 11.0.19041.1202
Tested in multiple browsers, on both desktop and mobile, both iOS and Android.
Activity
Agrejus commentedon Jan 12, 2023
Any movement on this?
tripolskypetr commentedon Mar 16, 2024
It's 2K24, still actual issue, not fixed
docs(drawer): explain how to keep a swipeable edge's content interactive
github-actions commentedon Oct 12, 2026
This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.
@tech-meppem Thanks again for creating this issue! If you have a moment, we would love to hear your thoughts on how we handled it with this short feedback form.