search

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

Modal malfunction on Chrome for Android when virtual keyboard is dismissed and modal closed #113

Open rob-rooam opened 1 year ago

rob-rooam commented 1 year ago

In our web application, we have identified an issue where the modal stops working under certain conditions. Specifically, this occurs when the user uses the Chrome browser on an Android device, the modal contains a field, and the virtual keyboard is dismissed. Once the modal is closed, it no longer functions properly. Looks like the main div that contains the react-modal-sheet-container and the backdrop button is not getting cleared up under this given context. It works for iOS though.

I reproduced it in this repo

immortal-blog commented 1 year ago

Yes. This is a bug. Even in safari for iOS, the height of this modal changes after opening and closing the virtual keyboard, becoming taller. Even destroying this component is useless. This will affect the display experience. This problem can be triggered when in the iOS 16.3.1 web PWA app (Safari - Add to Home Screen). This problem will not happen in the Safari browser.

JMarchandev commented 4 months ago

<Sheet isOpen={true} disableDrag={true} detent="full-height" snapPoints={[0.75]} onClose={() => {}} disableScrollLocking={true} // add this one <----------