[SwipeableDrawer] Mobile (iOS) scroll is broken when a child has "overflow" auto.

[oalexdoda]

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://agent.so/chats (must log in)

Steps:

1. Open the app on mobile
2. Log in with a free user account
3. Tap the + on the top right to open the bottom SwipeableDrawer
4. Scroll down a bit, and then scroll up a bit to see the Drawer closing unexpectedly.

Current behavior 😯

You can scroll down, but if you scroll back up the SwipeableDrawer will close. If you scroll down and without lifting your finger you scroll back up, it will allow you to scroll, but users often get confused by their panel getting closed. Also, if you hold your finger on some of the items, sometimes it does let you scroll back, but it's very rare and random.

Expected behavior 🤔

Scrolling inside of a child element should NOT interfere with the SwipeableDrawer. If the events system is not reliable, should there be a prop that makes only the Swipeable Edge open/close it?

Context 🔦

This is the component:

The body has a touch-action: pan-y, pan-x; but it doesn't seem to work even without that.

Full component: https://privatebin.net/?930efdb33f66a595#2kLaGuPEtH353pmPmsFQkS7FNG5LnabdZzvbW8ST5kgu

Your environment 🌎

npx @mui/envinfo

System:
    OS: macOS 13.3.1
  Binaries:
    Node: 19.9.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 9.6.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 112.0.5615.49
    Edge: Not Found
    Firefox: Not Found
    Safari: 16.4

The issue takes place on iOS Safari, latest version as of today 16.4.1. I would assume it happens on any touch device, at least iOS.

[oalexdoda]

Here's a video that shows the issue: https://share.abruptive.com/wbuDdKZz

Every swipe is inside the SwipeableDrawer component.

[mj12albert]

@altechzilla Would you mind providing a minimal reproduction? You can fork this template: https://mui.com/r/issue-template-latest

PS: Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.