Bug: Mobile Safari input inside sheet stays behind when sheet moves about react-modal-sheet

[YoFiq]

in my case i cannot type in input when detent={'content-height'}

Screen.Recording.2024-04-23.at.20.31.04.mov

[Temzasse]

Hi @filip-dot-cube and @YoFiq 👋🏻

Thanks for reporting this! I have a few follow-up questions:

1. What would be the expected behaviour when you first focus the input and then start dragging it?

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.

2. Could you utilise snap points for moving the sheet up when the input is focused?

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 onFocus event handler (and then snap back to lower position with onBlur)

[Temzasse]

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! 😎

[filip-dot-cube]

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?