nuxt / nuxt/ui

Unexpected drawer behavior when dragging content area (jumpy collapse & horizontal scroll flickering)

Open
#3,947 6 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

upstream/reka-ui v5
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

  1. Open a Drawer that contains content (text, divs, etc.).

  2. Click and hold anywhere on the content (not the drag handle at the top).

  3. Slightly drag or move your finger/mouse.

  4. The drawer begins to flicker or "jerk" as if it's trying to collapse.

  5. 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!

Image

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.