-
Notifications
You must be signed in to change notification settings - Fork 73
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug: Mobile Safari input inside sheet stays behind when sheet moves #156
Comments
in my case i cannot type in input when detent={'content-height'} Screen.Recording.2024-04-23.at.20.31.04.mov |
Hi @filip-dot-cube and @YoFiq 👋🏻 Thanks for reporting this! I have a few follow-up questions:
The fact that the input caret stays in place seems like a native browser behaviour instead of a "bug" in the library. One idea that comes to my mind is that the focus could be moved to the sheet component upon drag start which would blur the input and probably fix the ghost caret issue.
I'm hesitant to add any automatic behaviour to the sheet regarding inputs and I believe you could already ensure that the input is not behind the keyboard by snapping the sheet to a higher position via input |
Hi again! I have added a fix for the ghost caret issue to the version v3.1.0. The fix is basically just blurring the input when dragging gesture starts. About the keyboard issue: this library doesn't provide a built-in solution for handling the virtual keyboard on mobile, but I've added a section to the docs about virtual keyboard avoidance. Hopefully that helps! 😎 |
Hello @Temzasse thanks for your response. I have not yet tried the new version however by checking out the commit i have a feeling that while it kinda fixes the issue, it brings a new one. It will hide the keyboard which means potentionally unwanted flicker for the user. Not sure how to deal with this, but some developers might want to at least disable this feature since in some cases this can be even worse than the ghost caret itself. What do you think? |
Hi, first of all great library.
There is just on little thing that hunts me for days already.
When the user focuses the input inside modal the focused input or at least its caret seemingly stays on the previous place while dragging or snapping to a point (basically any time the sheet moves).
I have made a minimal reproduction in sandbox. No custom styles etc.
This bug is only reproducible on iOS devices with Safari. Tested on iPhone iOS/Safari 17.3
It can be tested directly here
Possibly related to #155
Is there any way to fix this? Thanks for reply and great work on the library.
safari-input-modal-sheet.MP4
The text was updated successfully, but these errors were encountered: