v-drag-over-target is not removed when the drop is ending in a Vaadin Grid

[jcgueriaud1]

Description of the bug

When I'm using drag and drop, the v-drag-over-target is added automatically when drag-over and it's not removed when the drop zone has a grid and the drag end is done on top of a grid.

v-drag-over-target

Expected behavior

v-drag-over-target should always be removed.

See the video: (the green border on top of the grid = v-drag-over-target is here)

Screen.Recording.2024-10-11.at.14.46.34.mov

Minimal reproducible example

package com.example.application.views;

import java.util.ArrayList;
import java.util.List;
import java.util.Random;

import com.vaadin.flow.component.dnd.DropEffect;
import com.vaadin.flow.component.dnd.DropTarget;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.grid.dnd.GridDropMode;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.theme.lumo.LumoUtility;

@Route("dnd-grid")
public class GridDnDView extends VerticalLayout {

    private List<BookRequest> bookRequests = new ArrayList<>();

    private BookRequest draggedItem;

    public GridDnDView() {
        Div div = new Div();
        Span span = new Span();
        Grid<BookRequest> grid = new Grid<>();
        grid.addColumn(BookRequest::getId).setHeader("ID");
        grid.addColumn(BookRequest::getStatus).setHeader("Status");
        grid.setRowsDraggable(true);
        grid.addDragStartListener(e -> {
            draggedItem = e.getDraggedItems().get(0);
            Notification.show("Drag started");
            div.addClassName(LumoUtility.Background.PRIMARY_10);
        });
        grid.addDragEndListener(e -> {
            draggedItem = null;
            Notification.show("Drag end");
            div.removeClassName(LumoUtility.Background.PRIMARY_10);
        });
        div.addClassNames(LumoUtility.Border.ALL, LumoUtility.BorderColor.PRIMARY, LumoUtility.Padding.MEDIUM);
        div.setHeight("400px");
        div.add(span);
        Grid<BookRequest> grid2 = new Grid<>();
        grid2.addColumn(BookRequest::getId).setHeader("ID");
        grid2.setItems(bookRequests);
        grid2.setSizeFull();
        div.add(grid2);
        div.setWidthFull();
        add(grid, div);
        DropTarget<Div> dropTarget = DropTarget.create(div);
        dropTarget.addDropListener(event -> {
            if (draggedItem != null) {
                span.setText(draggedItem.toString());
            }
        });
        dropTarget.setDropEffect(DropEffect.MOVE);
        fillBookRequests();
        grid.setItems(bookRequests);
        grid.setSizeFull();
        setSizeFull();
    }

    private void fillBookRequests() {
        for (int i = 0; i < 100; i++) {
            bookRequests.add(new BookRequest(i, getRandomStatus()));
        }
    }

    private BookStatus getRandomStatus() {
        return BookStatus.values()[new Random().nextInt(BookStatus.values().length)];
    }

    public class BookRequest {
        private final int id;
        private final BookStatus status;

        public BookRequest(int id, BookStatus status) {
            this.id = id;
            this.status = status;
        }

        public BookStatus getStatus() {
            return status;
        }

        public int getId() {
            return id;
        }

        @Override
        public String toString() {
            return "BookRequest{" +
                    "id=" + id +
                    ", status=" + status +
                    '}';
        }
    }

    public enum BookStatus {
        NEW, PROCESSING, APPROVED, REJECTED;
    }
}

and the CSS:

.v-drag-over-target {
    background-color: var(--lumo-primary-color-10pct);
}

.v-drag-over-target  vaadin-grid {
    border: 1px solid green;
}

vaadin-grid::part(dragstart-row) {
    border: 2px dotted red;
}

Versions

• Vaadin / Flow version: 24.5.0.beta5

[tepi]

Could be that Grid is eating the event Flow needs. Need to check if bug is on components side or flow side.

[mshabarov]

The issue was triaged and currently added to the backlog priority queue for further investigation.

[jcgueriaud1]

As a workaround, you can disable the Grid with Grid#setEnabled(false)

[tepi]

The issue was assigned to a developer and is currently being investigated.