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

snapPoint 1 (100%) & scrollable content not working #115

Closed jeremiasjutz closed 1 year ago

jeremiasjutz commented 1 year ago

I want my sheet to snap as high as possible, so I use the snapPoint 1, yet I can't get my to snap to 100%. Here is my config:

<Sheet
  ref={ref}
  isOpen={open}
  onClose={() => snapTo(2)}
  snapPoints={[1, 0.6, 62.5]}
  initialSnap={1}
  className="!z-10"
>

If I set my initialSnap to index 0, then initially it works as expected, but as soon as I start scrolling my content inside the sheet (no matter if up or down) it immediately snaps to index 1 and never lets me snap to index 0 again.

The children of my sheet look like this:

<Sheet.Container className="!shadow-[0_8px_24px] !shadow-black/30 ring-1 ring-black/10">
  <Sheet.Header>
    <Sheet.Header className="[&>*]:!h-4" />
    <div className="m-3 -mt-1 flex items-center justify-between md:hidden ">
      <Logo className="h-5" />
      <Button intent="share" className="flex items-center gap-2">
        <ShareIcon className="h-5 w-5" />
      </Button>
    </div>
  </Sheet.Header>
  <Sheet.Content style={{ paddingBottom: ref.current?.y }}>
    <div className="flex h-full flex-col overflow-auto">
      {children}
    </div>
  </Sheet.Content>
</Sheet.Container>
<Sheet.Backdrop className="!opacity-0" />

If I set my snapPoint at index 0 to -50 it works, but I would like to use as much space as possible.

But then comes my next problem. When the sheet is at the top most snapPoint, i can't scroll my content anymore. It seems to try to close the sheet for a split second but then resets the position to the snapPoint. At this snapPoint my scrollable content is unusable.

Reproducible Example (both the snapPoint 1 and scrollProblem): (tested on iPhone 13 / Safari)

Just change the first snapPoint to 1 to see the snapping Problem https://codesandbox.io/s/vigilant-rain-sgclfo?file=/src/App.js https://sgclfo.csb.app/

Video

Here you can see, when the sheet is opened, I can't scroll the content anymore. I seem to have everything like the scrollable+snappoints example.

https://user-images.githubusercontent.com/31439896/222111780-a57bbbf5-8693-4c11-9a2a-6065e4376d20.mov


framer-motion: 10.0.1 (also tested with 8.4.3 and 9.0.7) react-modal-sheet: 1.10.1

Temzasse commented 1 year ago

This seems to be a duplicate of https://github.com/Temzasse/react-modal-sheet/issues/122 🤔

Unfortunately scrolling in conjunction with dragging is kindah an unsolved problem on the web 😿 If you have any suggestion for solving this problem that would be welcome 🙏🏻 You can try disabling dragging on the sheet body and allow dragging only from the sheet header.