react-modal-sheet icon indicating copy to clipboard operation
react-modal-sheet copied to clipboard

Sheet not opening in `StrictMode`

Open Chrishuwei opened this issue 10 months ago • 6 comments

I am trying this module in my page. However, I cannot see the sheet in view because we set transform value is css. Also, we do not have this behavior in the release environment (I deployed my website through GCP).

One more interesting thing is if I zoom in and out by cmd +/-, then I can see the sheet rendering in view when I am in development mode.

Is this a known issue of this module? Or is there any workaround to prevent this issue? Thank you.

CODE: 'use client'; import { Sheet } from 'react-modal-sheet'; import { useState } from 'react';

export default function Container() {

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

return (
    <div>
        <div>this is container</div>
        <button onClick={() => setOpen(true)}>Open sheet</button>

        <Sheet
            isOpen={isOpen}
            onClose={() => setOpen(false)}
            snapPoints={[-50, 0.5, 200, 0]}
            initialSnap={1}
        >
            <Sheet.Container>
                <Sheet.Header />
                <Sheet.Content>
                    <div style={{ 'color': 'black' }}>We will have product content here</div>
                </Sheet.Content>
            </Sheet.Container>
            <Sheet.Backdrop />
        </Sheet>
    </div>
)

}

Chrishuwei avatar Dec 28 '24 21:12 Chrishuwei