Comments (5)
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? 🙂
from react-modal-sheet.
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.
from react-modal-sheet.
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:
from react-modal-sheet.
@elsonel did you fix it? Not working for me
from react-modal-sheet.
@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.
from react-modal-sheet.
Related Issues (20)
- `onClick` is missing from backdrop props HOT 2
- How can I keep the modal sheet opened using snap points?
- Iphone Keyboard Issue when we have input in content HOT 4
- Strange behaviour after screen orientation changes HOT 3
- framer-motion is not tree-shaking HOT 1
- Unable to scroll behind the sheet, but able to click HOT 1
- Scroll flickering on iOS with Sheet.Scroller & inputs HOT 4
- Spring type animation
- Sheet is not opening on mobile browsers
- Sheet is not reopening in desktop Chrome HOT 4
- Allow style with Tailwind with className prop HOT 2
- initialSnap -34px bug HOT 2
- How do I implement a sticky footer? HOT 1
- Customer Header breaks dragging behavior
- Stacking sheets HOT 1
- TypeError: undefined is not an object (evaluating 'scrollable.scrollTop') HOT 1
- prevent Closing component HOT 2
- Sheet not closing on mobile HOT 8
- Bug on Safari Mobile, when switching the address bar up
- Bug: Mobile Safari input inside sheet stays behind when sheet moves HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-modal-sheet.