[SwipeableDrawer] Portal inside shadow DOM mobile touch event ignored
Open
Nobody has claimed this yet.
component: SwipeableDrawer
priority: low
scope: drawer
type: bug
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Steps to reproduce 🕹
Link to live example: https://codesandbox.io/s/lingering-water-wr6cqx
Steps:
- switch browser to mobile mode and try to swipe from bottom
Current behavior 😯
Mobile touch events ignored if MuiModal use ShadowDom as container.
Expected behavior 🤔
Working on mobile
Context 🔦
No response
Your environment 🌎
npx @mui/envinfo
chrome
System:
OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
Binaries:
Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node
Yarn: 1.22.19 - /mnt/c/Program Files (x86)/Yarn/bin/yarn
npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm
Browsers:
Chrome: Not Found
Firefox: Not Found
npmPackages:
@emotion/react: 11.10.6 => 11.10.6
@emotion/styled: 11.10.6 => 11.10.6
@mui/base: 5.0.0-beta.3
@mui/core-downloads-tracker: 5.13.3
@mui/icons-material: ^5.11.0 => 5.11.16
@mui/lab: ^5.0.0-alpha.120 => 5.0.0-alpha.132
@mui/material: ^5.9.1 => 5.13.3
@mui/private-theming: 5.13.1
@mui/styled-engine: 5.13.2
@mui/system: 5.13.2
@mui/types: 7.2.4
@mui/utils: 5.13.1
@types/react: 18.0.28 => 18.0.28
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
styled-components: 5.3.6 => 5.3.6
typescript: 5.0.4 => 5.0.4
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox and reproduce the ignored swipe in mobile browser mode. Trace the SwipeableDrawer, Portal, and MuiModal container path when the container is a Shadow DOM. Done means the drawer responds to mobile touch swipes when rendered in that container, with the reproduction confirmed working.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 32/100