[SwipeableDrawer] disableDiscovery on a swipeable edge drawer has inverted effect.
Nobody has claimed this yet.
- 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
Current behavior 😯
This only has a noticeable effect if the drawer has a swipeable edge (Docs).
Leaving "disableDiscovery" as false means that when you hold click on the drawer (requires mobile touch emulation for touchstart), the drawer pops up a bit, which is correct.
Setting "disableDiscovery" to true, however, means that the drawer dips down a bit when you start holding the drawer, instead of staying still.
GIF showcase: https://imgur.com/a/q4MNvG6
Expected behavior 🤔
Setting "disableDiscovery" to true should mean that the drawer should not move until the user starts to drag the drawer.
Steps to reproduce 🕹
Steps:
Requires mobile touch emulation (can just use chrome / firefox mobile mode in dev tools)
- Use codesandbox demo from: https://mui.com/components/drawers/#swipeable-edge
- Add "disableDiscovery={true}" to the SwipeableDrawer component
- Click on drawer, and it dips down.
Context 🔦
I'm trying to get the drawer not to move, until the user starts moving.
I have tracked the cause to this line in SwipeableDrawer.js:
(disableDiscovery ? 15 : -DRAG_STARTED_SIGNAL),
This means that when disableDiscovery is true, the drawer dips down 15px on touchstart.
I assume it's 15 due to reasons related for when a drawer doesn't have a swipeable edge. I think this should just be a prop, something like "discoverAmount", where you can set the DRAG_STARTED_SIGNAL to a number for both up and down sides, or [number,number] for separate up and down amounts.
Your environment 🌎
`npx @mui/envinfo`
Don't forget to mention which browser you used.
Output from `npx @mui/envinfo` goes here.
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 in SwipeableDrawer.js at the disableDiscovery logic containing (disableDiscovery ? 15 : -DRAG_STARTED_SIGNAL). Reproduce the issue with the swipeable-edge documentation demo and mobile touch emulation. Done means setting disableDiscovery to true keeps the drawer still on touchstart until the user drags it.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 52/100