[SwipeableDrawer] Can't swipe to close using the very edges of the Swipeable edge demo

NaamanTsur commented 1 year ago

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://mui.com/material-ui/react-drawer/#swipeable-edge

Steps:

Open the drawer (either swipe or open button)
Try to close the drawer with a swipe action in the bleeding edge section of the drawer

Current behavior 😯

Only the non-bleeding area of the drawer is tracking swipe events.

Expected behavior 🤔

The bleeding section should track swipe events while the drawer is open so the drawer can be closed by a swipe from the bleed area.

Context 🔦

When the bleed section has a large height value (larger than the demo for example), it would seem like the swipe action doesn't work for the drawer, when in reality it does work but not for the bleeding section.

Your environment 🌎

npx @mui/envinfo

``` System: OS: macOS 13.0.1 Binaries: Node: 16.20.0 - /opt/homebrew/bin/node Yarn: Not Found npm: 8.19.4 - /opt/homebrew/bin/npm Browsers: Chrome: 114.0.5735.198 Edge: Not Found Safari: 16.1 npmPackages: @emotion/react: ^11.11.1 => 11.11.1 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.6 @mui/core-downloads-tracker: 5.13.7 @mui/icons-material: ^5.13.7 => 5.13.7 @mui/lab: ^5.0.0-alpha.135 => 5.0.0-alpha.135 @mui/material: ^5.13.7 => 5.13.7 @mui/private-theming: 5.13.7 @mui/styled-engine: 5.13.2 @mui/system: 5.13.7 @mui/types: 7.2.4 @mui/utils: 5.13.7 @types/react: ^18.2.14 => 18.2.14 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.1.6 => 5.1.6 ```

OndrejHj04 commented 1 year ago

I have successfully reporoduced this issue and it seems to be a problem

mj12albert commented 1 year ago

@NaamanTsur Just to clarify this issue is about this example right? https://mui.com/material-ui/react-drawer/#swipeable-edge

NaamanTsur commented 1 year ago

@mj12albert Yes, that's the one. It is kind of hard to notice in the demo because the edge's height is low but at larger heights, closing the drawer is not possible through the bleeding edge section.

I noticed it while developing a feature which required a large bleeding edge so this is an issue.

Abzdefgxyj commented 6 months ago

Hi - have any steps been discovered to fix how this demo is presented or how the swipeable edge is handled in the open state? We're also using it on a project and it's a usability issue

mui / material-ui