Skip to content

Tree: Wrong index when moving node between parents #8236

@InToSSH

Description

@InToSSH

Describe the bug

There is an issue when moving a node from inside of one parent and placing it inside another parent.
If the target parent has one child, no matter if you put the node above or below this child, the event will always produce index: 0.

Use repro steps given this example below:

<template>
        <Tree
            v-model:value="categoriesDynamic"
            v-model:selectionKeys="selectedKey"
            class="w-full"
            draggable-nodes
            droppable-nodes
            selection-mode="single"
            @node-drop="onNodeDrop"
        >
        </Tree>
</template>

<script setup>
let categoriesDynamic = ref([
    {
        key: '0',
        label: 'Documents',
        data: 'Documents Folder',
        icon: 'pi pi-fw pi-inbox',
        children: [
            { key: '0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
            { key: '0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
        ]
    },
    {
        key: '1',
        label: 'Events',
        data: 'Events Folder',
        icon: 'pi pi-fw pi-calendar',
        children: [
            { key: '1-0', label: 'Meeting', icon: 'pi pi-fw pi-calendar-plus', data: 'Meeting' },
        ]
    }
]);

function onNodeDrop(event) {
    console.log('Node dropped', event);
}
</script>

Full screenshot with debug log of all steps:

Image

Pull Request Link

No response

Reason for not contributing a PR

  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/uefh5gmh-fzmyi1tf?file=src%2FApp.vue

Environment

Running local devstack on Fedora 42. Devstack is in webdevops/php-nginx-dev:8.4 container. App is running Laravel 12 on BE with Inertia.js. Primevue components are autoimported using auto-import-resolver.

Vue version

3.3.13

PrimeVue version

4.4.1

Node version

v22.20.0

Browser(s)

Vivaldi 7.6.3797.63

Steps to reproduce the behavior

  • Drag the Expenses.doc node from Documents
  • Drop it inside Events above the Meeting node
    • This produces dragNode: Expenses.doc, dropNode: Meeting, index: 0
Image
  • Now put the Expenses.doc node back into Documents parent to original place
  • Drag the Expenses.doc again
  • Put it inside Events BELOW the Meeting node (so that the Expenses.doc is last child inside Events)
    • This produces the same result: dragNode: Expenses.doc, dropNode: Meeting, index: 0
Image
  • This way we can't tell, if the node went above or below the other child.

Expected behavior

The index value should be correct based on the position relative to the other child in the parent.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: Needs TriageIssue will be reviewed by Core Team and a relevant label will be added as soon as possible

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions