Bug: Mobile Safari input inside sheet stays behind when sheet moves

[filip-dot-cube]

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.

https://github.com/Temzasse/react-modal-sheet/assets/19822604/cbb5dda6-b867-451d-acd3-07c73088ac10

[YoFiq]

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

https://github.com/Temzasse/react-modal-sheet/assets/18092761/86466e5b-8940-40b2-9c76-ba8e22e48166

[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?