search

emilkowalski / vaul

An unstyled drawer component for React.
https://vaul.emilkowal.ski
MIT License
5.27k stars 170 forks source link

Mobile Focused Input with Chakra-UI #299

Closed reallybeard closed 3 months ago

reallybeard commented 3 months ago

We have a project using chakra-ui, and this lib is super cool and works great for the most part.

I'm just having some issues with focused inputs, that are not at the top of the scroll view. Seems there may be something that chakra-ui is adding somewhere that is causing this scroll to happen when you select the other inputs.

Step to reproduce:

  1. Open the drawer
  2. Close the keyboard on mobile
  3. Tap the second input
  4. The window will scroll up, blocking the input.

Here is a screen recording of the issue: https://github.com/emilkowalski/vaul/assets/89934888/b1e43a42-bb58-423a-a7bb-0b0fc52ec8ea

Here is a barbones example based off of the drawer-scrollable example with chakra. https://codesandbox.io/p/devbox/drawer-scrollable-forked-65kx3r

reallybeard commented 3 months ago

Alright I think I figured it out.

Chakra has transitionProperty on the inputs. When I removed that it fixed the issue. Hopefully this helps someone else having this issue.