Component: TreeTable, dragging over table cells

[mbraeuner]

Describe the bug

When using TreeTable with pDroppable on a table row, the table row will lose highlighting class "p-draggable-enter" if you move the mouse cursor outside the table cell (td) in the same row (tr)

Bildschirmaufzeichnung.vom.08.01.2024.21.59.46.webm

Environment

Angular 17.0.8

Reproducer

https://stackblitz.com/edit/github-egxv1j-zufyea

Angular version

17.0.8

PrimeNG version

17.3.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v20.10.0

Browser(s)

chrome 120.0.6099.199 64-bit

Steps to reproduce the behavior

https://stackblitz.com/edit/github-egxv1j-zufyea

1. drag row from first table
2. drag it to a cell on the second table
3. move the cursor in the same row of the second table to another cell of the same row
   => current row will loose the class p-draggable-enter to highlight the drop target

Expected behavior

while dragging an element in the same table row between different cells, the row should not lose class "p-draggable-enter"

[mbraeuner]

further investigation into this case. The drag enter for the new element will be called before the dragleave of the old element.

The following code is not a fix. I'ts just for testing. I delayed the addClass to the next event cycle in the dragdrop.ts of primeng/dragdrop

    @HostListener('dragenter', ['$event'])
    dragEnter(event: DragEvent) {
        event.preventDefault();

        if (this.dropEffect) {
            (event.dataTransfer as DataTransfer).dropEffect = this.dropEffect;
        }
        // delay addClass
        setTimeout(() => {
            DomHandler.addClass(this.el.nativeElement, 'p-draggable-enter');
        });

        this.onDragEnter.emit(event);
    }

I think a fix could be to handle the drag events only if the element with the pDroppable has been entered or left with the cursor.

[mertsincan]

Thanks a lot for your report! I set a milestone for it and we'll check it before the milestone is released. Also, I appreciate if you support us with PR.