#37897·material-ui

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

Author: NaamanTsurCreated Jul 10, 2023Updated Sep 3, 2026
Labelsdocsscope: drawercomponent: SwipeableDrawer

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Steps to reproduce

Link to live example: https://mui.com/material-ui/react-drawer/#swipeable-edge

Steps:

  1. Open the drawer (either swipe or open button)
  2. 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