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

Mobile Keyboard Covers Up Input in Container #101

Closed elsonel closed 1 year ago

elsonel commented 1 year ago

See video below. Anyway for this to be fixed in the library or external solutions?

https://user-images.githubusercontent.com/10892740/195973368-76fffbb8-c8a4-464c-86e8-eda022616885.MOV

Temzasse commented 1 year ago

I think this should be solved by the users of this library since the root problem is more a design/UX problem than a library problem. If you look how bottom sheets are implemented in native applications they almost never have inputs at the bottom of the sheet exactly because of this problem. Any input should be at the top of the sheet so that the keyboard doesn't cover it (like in the Slack example).

Also it seems that it's very difficult to detect if the virtual keyboard is visible or not: https://stackoverflow.com/questions/40175207/detect-virtual-keyboard-on-screen-and-landscape-orientation-in-javascript

If there is a way to detect the keyboard you could apply bottom padding to the sheet content and scroll the input into view when it's focused. Adding an example of this in the /example app would be very nice but I don't think this should be part of the core library.

If you have time would you be interested in adding a new example view for this in the example app? 🙂

elsonel commented 1 year ago

@Temzasse

One of the reasons I brought this issue up is because a production build running an older version of this library didn't have this issue. The mobile keyboard simply pushes the entire modal upwards. I'm not sure if recent updates to this library changed this behavior or there was something weird in my code to begin with. I'm also noticing in the latest version that sometimes the modal moves upwards due to the keyboard, but then immediately snaps back down to its original position - again not sure if it is because of the browser lagging or the library is actually doing something to force it back down.

That being said, I do agree that approaching it as a design/UX problem will give me more control over the behavior. I'm just not sure about the correct way to implement. Like you said, it is difficult to detect the virtual keyboard, along with the fact that there are various devices and sizes.

React-Native has an amazing library for this (https://www.npmjs.com/package/react-native-keyboard-aware-scroll-view), but I'm not sure if there is one currently for React itself.

Temzasse commented 1 year ago

You are right that there was a recent change that caused the sheet not to move up when the keyboard shows up. That fix was related to a better body scroll locking mechanism which ensured that it's not possible to scroll the sheet in a way that would cause a blank space to appear below the sheet while the keyboard is up.

See these issues:

dmitryshelomanov commented 1 year ago

@elsonel did you fix it? Not working for me

elsonel commented 1 year ago

@elsonel did you fix it? Not working for me

@dmitryshelomanov Unfortunately no. Our team opted to remove modal inputs entirely.

Reason is because the API for detecting whether the mobile keyboard is active and how much space it takes is currently experimental and browser dependent.

Furthermore there were too many variables to consider and "hacks" to implement when rearranging existing content within the modal once the keyboard is active.