Unexpected drawer behavior when dragging content area (jumpy collapse & horizontal scroll flickering)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.9k
- Forks
- 1.1k
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 57
Description
Description
When using the Nuxt UI Drawer, if you press and hold on the content inside the drawer (not the top drag handle), the drawer starts to "jump" or flicker as if it's trying to close or collapse — but it doesn't fully do so. It feels like it's responding to a drag gesture, even though you're not interacting with the handle.
This issue is also reproducible on the official ui.nuxt.com site.
Steps to reproduce
-
Open a Drawer that contains content (text, divs, etc.).
-
Click and hold anywhere on the content (not the drag handle at the top).
-
Slightly drag or move your finger/mouse.
-
The drawer begins to flicker or "jerk" as if it's trying to collapse.
-
If there's a horizontal scroll inside the drawer, its width may flicker or resize as well.
Expected behavior
The drawer should remain stable unless the user explicitly interacts with the drag handle. Content interaction shouldn't trigger drawer behavior.
Additional context
This seems to happen only when dragging or holding on the content area, which suggests that the gesture might be incorrectly triggering the drawer's collapse logic.
Does anyone know how to fix or work around this?
Maybe there's a way to prevent gesture events from propagating to the drawer when interacting with content? Or should we explicitly block drag/touch events inside the drawer body?
Any insights would be appreciated!
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 behavior in the Nuxt UI Drawer, both on the official ui.nuxt.com site and with content that includes horizontal scrolling. Trace how dragging or holding the Drawer content reaches its collapse behavior, then verify that content interactions leave the Drawer stable while the drag handle still works.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 50/100