Sheet disappears after few closings on iOS

[andrewLapshov]

Hello! After toggling the isOpen state several times, Sheet stops displaying. I've tried with both rootId and without, but the result is the same. I've checked on earlier versions of iOS using Browserstack, but I couldn't reproduce the issue.

iOS 17.5.1 react-modal-sheet 3.1.0

export const FiltersSheet = () => {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <>
            <div className={styles.filterContainer}>
                <button className={styles.filterButton} onClick={() => setIsOpen((isOpen) => !isOpen)}>
                    <FilterIcon />
                </button>
            </div>

            <Sheet detent="content-height" isOpen={isOpen} rootId="root" onClose={() => setIsOpen(false)}>
                <Sheet.Container>
                    <Sheet.Header />
                    <Sheet.Content>
                        <Sheet.Scroller>
                            <h2 className={styles.title}>Filters</h2>
                        </Sheet.Scroller>
                    </Sheet.Content>
                </Sheet.Container>
            </Sheet>
        </>
    );
};

https://github.com/Temzasse/react-modal-sheet/assets/55600612/1e04a591-b1a8-4b01-86d0-461f43ea7154

[Pouria-Rezaeii]

I faced this issue also on Firefox. I temporarily solved the issue by displaying the modal only when the show state is true:

{show && <ReactSheetModal ... />

The only problem with this approach is that the modal will be unmounted when the modal gets closed, but the user won't notice any difference.

Waiting for a fix...

[Temzasse]

Hi @andrewLapshov and @Pouria-Rezaeii 👋🏻

I'm not able to reproduce this issue locally. Could you try the latest version of react-modal-sheet and check if the problem still occurs?

If the issue is still happening it would be super helpful to get a reproduction in CodeSandbox or StackBlitz 🙏🏻

[khashashin]

I think it's related to the motion, and I was able to fix this with the following zIndex and visibility setting:

<Sheet
  ref={ref}
  disableDrag={disableDrag}
  snapPoints={[0.9, 0.5]}
  initialSnap={1}
  isOpen={isOpen}
  onClose={() => toggle('hide')}
  onSnap={handleSnap}
  style={{
     zIndex: isOpen ? '9999999' : '-1',
     visibility: isOpen ? 'visible' : 'hidden'
  }}>