[SwipeableDrawer] Buttons and other interactable components prevent opening a Swipeable edge drawer.

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/s/swipeableedgedrawer-material-demo-forked-d3shm?file=/demo.js

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 🌎

  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.

Start by reproducing the issue in the linked CodeSandbox demo with mobile touch emulation, then review the SwipeableDrawer behavior and PR 30759. Done means the edge drawer can still be opened by swiping while buttons, sliders, checkboxes, and other interactive components remain usable.