search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
94.11k stars 32.34k forks source link

[SwipeableDrawer] Swipe to close only works on touch devices #35680

Open Nielssg opened 1 year ago

Nielssg commented 1 year ago

Duplicates

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) ```
hbjORbj commented 1 year ago

I added a "waiting for upvotes" label. Let's wait for upvotes as it's not a small change.

corbmanj commented 1 year ago

I came up with an interim solution that I am using, which is to add an onMouseDown event that also calls the handle close event to the handle. It's enough to fool the user into thinking they are dragging. Here is a forked sandbox with the implementation. https://codesandbox.io/s/great-hertz-0kmorp?file=/src/App.tsx

mrafieefard commented 2 months ago

So why you don't fix this issue its open from 2022

bitofbreeze commented 1 month ago

This seems as intended to me. Emulating a touch swipe with a cursor is unintuitive. It requires the user to mouse down > drag fast > mouse up in the correct direction without too much skew off the axis. I can't think of any single interaction in anything I've used that uses this.