Temzasse / react-modal-sheet

Flexible bottom sheet component built with Framer Motion to provide buttery smooth UX while keeping accessibility in mind 🪐
https://temzasse.github.io/react-modal-sheet/
MIT License
783 stars 74 forks source link

Fix sheet not closing properly after slow drag to bottom #116

Closed joaquinwojcik closed 1 year ago

joaquinwojcik commented 1 year ago

Issue

When a user slowly drags the sheet to the bottom, the sheet does not always close as expected. You can see this behavior in the following video

https://user-images.githubusercontent.com/3205737/223282060-ad979fa6-a2f0-4603-9ed4-41e25abb9e7b.mp4

Solution

To fix this issue I made a very little adjustment.

From:

if (snapTo >= sheetHeight) onClose();

To:

const roundedSheetHeight = Math.round(sheetHeight);
const shouldClose = snapTo >= roundedSheetHeight;
if (shouldClose) onClose();

This change ensures that we are comparing rounded values when checking if the sheet should close. Remember that snapTo has been rounded when validateSnapTo function was called.

joaquinwojcik commented 1 year ago

@Temzasse Althought I've made some local tests and its working pretty fine, I'm not sure if this collides with any other expected behavior. Let me know if I can help with something else.

Temzasse commented 1 year ago

This is released in v1.10.2