Modal behave weird with on-screen keyboard(window size change) Android

[skorphil]

Difficult to explain, but ironically the mobile component works pretty bad with on-screen keyboard:

It snaps chaotically and when keyboard is closed it doesnt always reset to its original snap point. Sometimes even stuck between snapping points (for example if its being opened to -10, then open a kbd, then close a kbd: sheet remain its size, but moving under the viewport)

https://github.com/user-attachments/assets/3ed85de6-8632-40cd-9e46-42d16906446a

<Sheet
        dragVelocityThreshold={100}
        isOpen={institutionId ? true : false}
        onClose={() => void navigate("/new")}
        snapPoints={[-10, 320]}
        initialSnap={1}
      >

[skorphil]

Seems there is the problem with sort of delay.

Android is working much better with keyboard, changing not only viewPort, but also window size.

But looks like the sheet modal fail to get new window size values - thats why bottom of the sheet moving off-screen. Maybe there is a way to add sort of timeout IDK?

[Temzasse]

Hi @skorphil 👋🏻

I'm not sure I fully understand what is happening in the provided video 🤔 Why is the screen shrinking suddenly?

Have you taken a look at the example app's AvoidKeyboard component?

This library doesn't do any automatic keyboard handling as it is impossible to predict what the intended behaviour should be. As a rule of thumb you should make sure that the sheet is always fully opened when the input is focused so that there is enough space for the keyboard to appear without having to pushing up the input.

[skorphil]

Hi @skorphil 👋🏻

I'm not sure I fully understand what is happening in the provided video 🤔 Why is the screen shrinking suddenly?

Have you taken a look at the example app's AvoidKeyboard component?

This library doesn't do any automatic keyboard handling as it is impossible to predict what the intended behaviour should be. As a rule of thumb you should make sure that the sheet is always fully opened when the input is focused so that there is enough space for the keyboard to appear without having to pushing up the input.

Screen is shrinking, because KBD is opening ))

[Temzasse]

Okay 😄 It looked more like you entered a split screen mode or something.

Can you record a video where I can see the keyboard? Also could provide a reproduction code example for this?

[skorphil]

Okay 😄 It looked more like you entered a split screen mode or something.

Can you record a video where I can see the keyboard? Also could provide a reproduction code example for this?

Cant record another video since I have changed design to single snap point to prevent that bug. Double snap implementation is buried in commits: https://github.dev/skorphil/savnote/blob/b3e4cbfbaabb3d174828c5d703a074ce9642b233/src/pages/new/ui/New.tsx#L95-L96