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.

[tepi]

Due to a regression with no apparent solution, we needed to revert this fix. I am currently looking into a new fix for this that will not break existing functionality.

[tepi]

Transferring issue to web-components repository, since was unable to fix it on Flow side without causing unwanted effects on other features.

Either we need to let Grid propagate the DnD related events, or we need a custom event(s) fired that we could listen to in Flow and remove/add class names based on those.

Edit: removed this from Flow board as well, please get back to us if anything is needed on Flow side.