huntabyte / vaul-svelte

An unstyled drawer component for Svelte.
https://vaul-svelte.com
MIT License
467 stars 19 forks source link

Adding snapPoints breaks scrolling into view for inputs when keyboard opens #73

Open ispyinternet opened 7 months ago

ispyinternet commented 7 months ago

Describe the bug

when you add snapPoints (even just one), to the drawer , if you have a form, then when you open the keyboard, the focused input does not scroll into view.

I would also say that the scrolling action (when working) is very aggressive, i.e. it scrolls the content so much that the input in focus is hard aligned to the top of the drawer. Would it be possible to knock that back a notch!?

Reproduction

Stackblitz will not reproduce because you cannot open on a mobile

Logs

No response

System Info

System:
    OS: Linux 6.1 Amazon Linux 2023
    CPU: (4) x64 AMD EPYC 7571
    Memory: 5.47 GB / 15.45 GB
    Container: Yes
    Shell: 5.2.15 - /bin/bash
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.19 - ~/.npm-global/bin/yarn
    npm: 8.15.1 - ~/.npm-global/bin/npm
    pnpm: 8.15.0 - ~/.local/share/pnpm/pnpm
  npmPackages:
    svelte: ^4.2.8 => 4.2.8 
    typescript: ^5.3.3 => 5.3.3

Observed both with chrome and safari on iPhone.

Severity

annoyance

ispyinternet commented 7 months ago

It looks like there are a couple of related issues in the react version:

https://github.com/emilkowalski/vaul/issues/321 https://github.com/emilkowalski/vaul/issues/284

vishaljak commented 5 months ago

@ispyinternet were you able to find a workaround for this? I am facing a similar issue

chanmathew commented 1 month ago

Also running into this issue, when you have an input in the drawer it seems to break the snappoints and for some reason gets stuck at half height as soon as i focus the input, and the input scrolls to the top of the drawer. Has anyone found a workaround?