[Drawer] Input field in drawer when focused breaks
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.9k
- Forks
- 1.1k
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 57
Description
Environment
- Nuxt UI Version - 3.X - 4.X
Is this bug related to Nuxt or Vue?
Nuxt
Package
v4.x
Version
v4.7.1
Reproduction
It happens on IOS. Just get a Iphone, open NuxtUI drawer component demo page and find demo with input. Open drawer, click on the input.
Description
Hey, I'm experiencing an issue that I also noticed in the NuxtUI Demo components. When you have an input field inside a drawer and tap on it on mobile, the keyboard appears. Because of this, the browser tries to adjust the text field's position so it stays visible and isn't covered by the keyboard, which causes the entire body to scroll. As a result, there's a weird blank space between the drawer and the keyboard. You can see this happening in the attached video and screenshot.
https://github.com/user-attachments/assets/a782c649-b2a8-4b75-9f2a-ca76d5d4523f
Additional context
No response
Logs
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue on iOS from the Nuxt UI drawer component demo page with an input field, then inspect the drawer component's behavior when the input is focused. Done means tapping the input no longer scrolls the body or leaves a blank space between the drawer and the keyboard.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- ios, nuxt, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100