Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
2 tasks done
tech-meppem opened this issue Jan 24, 2022 · 0 comments
Open
2 tasks done
Labels
component: SwipeableDrawer The React component. new feature New feature or request

Comments

@tech-meppem
Copy link
Contributor

tech-meppem commented Jan 24, 2022

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.
@tech-meppem tech-meppem added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 24, 2022
@mnajdova mnajdova added the component: SwipeableDrawer The React component. label Jan 25, 2022
@hbjORbj hbjORbj added new feature New feature or request and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 25, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: SwipeableDrawer The React component. new feature New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants