nuxt / nuxt/ui

Tree: Drag/drop bug on docs page

Open
#6,483 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

triage
Dominant language
TypeScript
Stars
6.9k
Forks
1.1k
Avg merge
1d 7h
Merged PRs (30d)
57

Description

Environment

On the live Nuxt UI docs page
https://ui.nuxt.com/docs/components/tree#with-drag-and-drop

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

v4.8.0

Reproduction
  1. Go to https://ui.nuxt.com/docs/components/tree#with-drag-and-drop (note it is the drag and drop section)
  2. drag/drop a file above a folder
  3. open/close a folder
  4. now the tree structure is messed up
Description

The drag and drop feature for the Tree component breaks the ordering when elements are moved

here is a preview gif of the issue
Image

Additional context

No response

Logs

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 with the Tree component and its drag-and-drop example at the linked Nuxt UI docs page, using the reproduction steps to observe the ordering change. Inspect the component behavior around moving an item above a folder and then opening or closing that folder. Done means the tree keeps the expected structure and ordering after those actions.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
64/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.