It can't be closed when even isOpen = true

[IslamicProgrammer]

<Sheet isOpen={open} onClose={() => {}}> <Sheet.Container> <Sheet.Header /> <Sheet.Content>{body}</Sheet.Content> </Sheet.Container> <Sheet.Backdrop /> </Sheet>

  In my case open is true but i can close it

[adshrc]

you need to use a State where you track the open status. if you set the open to false, it will close the modal. Btw, </Sheet> is missing at the end

[Temzasse]

Currently the only way to force the sheet to remain open is to re-open it when the user closes it:

const [isOpen, setOpen] = useState(false);

return (
  <Sheet isOpen={isOpen} onClose={() => setOpen(true)} />
);

I'll try to find a better way to force the sheet to remain open 🕵🏻

[ReidCampbell]

I am also interested in an option to persist the bottom sheet. Id like an option for dragging to stop once it hits the last snap point

[AbdullahKhan780]

Currently the only way to force the sheet to remain open is to re-open it when the user closes it:

const [isOpen, setOpen] = useState(false);

return (
  <Sheet isOpen={isOpen} onClose={() => setOpen(true)} />
);

I'll try to find a better way to force the sheet to remain open 🕵🏻

This way the animation gets broken! I have attached my code screenshot and a video of how it's behaving. I hope it will be fixed soon!

https://github.com/Temzasse/react-modal-sheet/assets/68871807/50dacbe9-089b-40eb-a6a6-7ba402630371

[ReidCampbell]

Yeah setting it to <Sheet isOpen={isOpen} onClose={() => setOpen(true)} /> didn't work for me. I ended up doing

useEffect(() => {
  if (isOpen) return;
  setTimeout(open, 200);
}, [isOpen, open]);

<Sheet isOpen={isOpen} onClose={close} />

Id like the ability for the sheet not to be able to be dragged past the lowest snapPoint and the ability to disable the closing when the drag force is high i.e. Dragging down fast at the highest snapPoint shouldn't cause it to close.

[amnanjum01]

I have found a way around. So basically, when the isOpen state changes to false, I have added a useEffect hook with isOpen in my dependency array. Once the isOpen changes from true to false, inside the useEffect I will check if the state is false and if it is false I will set it to true. (In my answer, isResultOpen is isOpen)

`const [isResultOpen, setIsResultOpen] = useState(false);

useEffect(()=>{ if(isResultOpen == false){ setIsResultOpen(true) } },[isResultOpen])

`

You might be wondering if it is false by default then it is true by default because on the initial render it is false and then this will be detected and it will be turned into true right away so no time to actually open it. Well, I found a work around that would conditionally render the component as per my use case.