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
828 stars 78 forks source link

Customer Header breaks dragging behavior #149

Open sharpsteelsoftware opened 10 months ago

sharpsteelsoftware commented 10 months ago

When using a custom Header

      <Sheet
      draggable={false}
        className='mx-4'
        isOpen={isOpen}
        onClose={() => setOpen(false)}
      >
        <Sheet.Container className=''>
          {/* <Sheet.Header className='overflow-clip rounded-t-xl border-4 border-b-0 border-neutral-800 bg-yellow-500'>
            <div
              className='mx-auto flex w-full cursor-pointer justify-center p-2 text-4xl text-black'
              onClick={() => setOpen(false)}
            >
              <MdOutlineClose />
            </div>
          </Sheet.Header> */}
          <Sheet.Header />
          <Sheet.Content className='border-4 border-t-0 border-neutral-800'>
            <Sheet.Scroller>{children}</Sheet.Scroller>
          </Sheet.Content>
        </Sheet.Container>
        <Sheet.Backdrop onTap={() => setOpen(false)} />
      </Sheet>

the dragging behavior is broken. If the user starts dragging the modal down, but enough to dismiss the dialog, then the modal will remain frozen on the screen and the entire site will be without interaction.

Going back to the standard Header fixes the issue