Easy to accidentally drag cell text instead of row

[TatuLund]

Description

If text in Grid's cell is selected drag filter is not applied.

Expected outcome

Drag filter should be applied regardless of text being selected or not. It is very accidentally paint text when you try drag.

Minimal reproducible example

@Route(value = "drag-filter", layout = MainLayout.class)
public class GridDragFilterIssue extends VerticalLayout {

    public GridDragFilterIssue() {
        Grid<String> grid = new Grid<>();
        grid.addColumn(item -> item);
        grid.addColumn(item -> "another-column " + item);
        grid.setPageSize(20);
        grid.setRowsDraggable(true);
        grid.setDropMode(GridDropMode.BETWEEN);
        grid.setDragFilter(s -> Objects.equals(s, "2"));

        grid.setItems(
                IntStream.range(0, 10).mapToObj(String::valueOf).toList());
        grid.addDragStartListener(e -> System.out.println("drag start"));
        grid.addDragEndListener(e -> System.out.println("drag end"));
        grid.addDropListener(e -> System.out.println("drop event"));
        add(grid);
    }
}

Steps to reproduce

Use the provided simplified sample, it should allow only the row 2 to be dragged.

Paint text in some other row, and then start dragging. See the video for reference:

Grid_drag_and_drop.mp4

For comparison try to drag some other row when text is not painted and notice the drag filter works.

Environment

Vaadin version(s): Vaadin 24.9.12
OS: Windows 11

Browsers

Chrome

Workaround

If design allows it, you can prevent text selection by setting the user-select: none style to the columns, e.g. using part name generator.

[DiegoCardoso]

Confirmed. It can be reproduced in web-components with:

<vaadin-grid>
  <vaadin-grid-column path="value" header="Item"></vaadin-grid-column>
  <vaadin-grid-column path="description" header="Description"></vaadin-grid-column>
</vaadin-grid>

const grid = document.querySelector('vaadin-grid');
grid.items = Array.from({ length: 5 }, (_, i) => ({ value: String(i), description: `Item ${i}` }));
grid.rowsDraggable = true;
grid.dropMode = 'between';
grid.dragFilter = (model) => model.item.value === '2';

grid.addEventListener('grid-dragstart', (e) => {
  const items = e.detail.draggedItems.map((i) => i.value);
  console.log(`dragstart: [${items}]`, items.some((v) => v !== '2') ? '— BUG: filter bypassed' : '');
});

[rolfsmeds]

The issue here is not actually the drag filter not getting applied, because that only applies to Grid rows (or items). What's happening in the video is that the cell's text is getting dragged instead of the row – a native html drag event – which the Grid then reacts to by showing drop indicators.

This can be reproduced e.g. by dragging some external element over the Grid.

We cannot disable text selection in Grid because users want to copy text from it.

As a workaround you could dynamically set the drop mode in DragStartListener, and clear it on DragEndListener, so that Grid only accepts (and indicates) drops when a Grid item drag is going on (example https://vaadin.com/docs/latest/components/grid/drag-drop#row-reordering)