[SwipeableDrawer] Swipe to close only works on touch devices

[Nielssg]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/flamboyant-fast-3ynzp2?file=/src/App.tsx

Steps:

1. Open the link above in a browser (not on mobile!)
2. Click on the "open" button
3. Try to drag down the drawer to dismiss it

Current behavior 😯

A drawer will appear which cannot be dismissed by dragging it down, this is only possible for devices which have touch targets (so basically mobile).

Expected behavior 🤔

When using the SwipeableDrawer, I would expect the drawer to be swipeable whether I am on a touch target device or when I'm using it on a desktop.

Context 🔦

I use the SwipeableDrawer to create a Material Bottom Sheet, where I would like to dismiss the sheet by dragging it down, whether I'm using a phone or a desktop. I noticed that users are trying to drag down the sheet (which is expected because we are providing a "handle") but they are unable to do so because they are using it on a desktop.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Windows 10 10.0.22621
  Binaries:
    Node: 17.5.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.18 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.22621.963.0), Chromium (108.0.1462.54)