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

Sheet disappears after few closings on iOS #165

Open andrewLapshov opened 3 weeks ago

andrewLapshov commented 3 weeks ago

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