mui / mui/material-ui

[SwipeableDrawer] disableDiscovery on a swipeable edge drawer has inverted effect.

Open
#30,762 0 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

component: SwipeableDrawer scope: drawer type: new feature
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)

  1. Use codesandbox demo from: https://mui.com/components/drawers/#swipeable-edge
  2. Add "disableDiscovery={true}" to the SwipeableDrawer component
  3. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.