Mobile behavior

[dannylin108]

I'm trying to use Drawer to emulate mobile BottomSheet. For that I'm catching popevent (when user presses hardware back button) and programmatically close the drawer by calling setOpen(false) from DialogContext.

But on many mobiles hardware back button is implemented by quick dragging content from edge of the screen. And the weird thing is that Drawer is catching this dragging and crashes if I call setOpen(false) while isDragging is true.

Please advise! 🙏

Thanks a lot!

[dannylin108]

Also, is it possible to selectively prevent users from finding frogs? 😜 That is if a drawer is completely open not to allow further dragging?

[GiyoMoon]

Yes! 😄 The drawer exposes the dampFunction prop, allowing you to modify this "overdrag" behavior. It accepts the dragged distance and allows you to modify it to create a damp effect. If you make it always return 0, it won't overdrag:

<Drawer dampFunction={() => 0}>

You can read more about it in the API Reference

[dannylin108]

Thanks!

But if keeping possibility of overdrag, how to remove a divider which designates the overdragged area (just on top of the frog in your example)?

[GiyoMoon]

The dividier your referencing to is just a rendering quirk showing a gap between the drawer and the ::after pseudo-element. I'd change top: 100% of the ::afterpseudo element to something like top: 99% and the gap should be gone.

[GiyoMoon]

arguably I should do this too on the docs to avoid this 😄 Will fix it later

[GiyoMoon]

Hi, could you provide a small reproduction of your use case? That would help me immensely with troubleshooting, thanks :)

[dannylin108]

Sure, https://codesandbox.io/p/github/dannylin108/corvu-oqeknh/main

[dannylin108]

But I used my mobile with its 'quick drag from an edge as back-button' feature..

[GiyoMoon]

Thanks! Yes, I'll test it on my phone (Pixel 7) with this feature enabled :)

[GiyoMoon]

Thanks for your patience! :)
This was indeed a bug in corvu. I fixed it and released it as @corvu/drawer@0.2.2, make sure to update 🎉