flow-components

flow-components copied to clipboard

Description

I added a CSS class name for cells in the column to support word wrapping, but the tree grid is not rendered correctly when filtering.

Expected outcome

The Tree Grid must be rendered correctly.

Minimal reproducible example

@CssImport(value = "./themes/my-theme/vaadin-grid.css", themeFor = "vaadin-grid")
@Route(value = "page")
public class TreeGridRenderingPage extends VerticalLayout {

    private String filterValue;

    public TreeGridRenderingPage() {
        List<Model> parents = new ArrayList<>();
        parents.add(new Model(1, null, "Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text"));
        parents.add(new Model(2, null, "Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text"));
        List<Model> children = new ArrayList<>();
        children.add(new Model(3, 1, "child 1, parent 1"));
        children.add(new Model(3, 2, "child 1, parent 2 "));
        children.add(new Model(3, 2, "child 2, parent 2 "));

        TreeGrid<Model> treeGrid = new TreeGrid<>();
        treeGrid.setItems(parents, parent -> children.stream().filter(child -> Objects.equals(child.parent, parent.id)).collect(Collectors.toSet()));
        treeGrid
                .addHierarchyColumn(model -> model.parent == null ? model.title : null)
                .setClassNameGenerator((row -> "word-wrap"))// Adding word wrapping
                .setHeader("First");
        Grid.Column<Model> second = treeGrid
                .addColumn(model -> model.parent != null ? model.title : null)
                .setHeader("Second");

        TreeDataProvider<Model> dataProvider = (TreeDataProvider<Model>) treeGrid.getDataProvider();
        dataProvider.addFilter(model -> filterValue == null || filterValue.isEmpty() || model.title.toLowerCase().contains(filterValue.toLowerCase()));

        // Filter field
        TextField textField = new TextField();
        textField.setClearButtonVisible(true);
        textField.addValueChangeListener(e -> {
            // Applying the filter
            filterValue = e.getValue();
            dataProvider.refreshAll();
        });
        treeGrid.appendHeaderRow().getCell(second).setComponent(textField);

        treeGrid.expand(parents);
        setSizeFull();
        treeGrid.setSizeFull();
        add(treeGrid);
    }

    private static class Model {
        Integer id;
        Integer parent;
        String title;

        public Model(Integer id, Integer parent, String title) {
            this.id = id;
            this.parent = parent;
            this.title = title;
        }

        @Override
        public String toString() {
            return title;
        }
    }

}

Additionally create a CSS file in the frontend\themes\my-theme\ with the contents:

.word-wrap[part~="cell"] ::slotted(vaadin-grid-cell-content) {
    word-wrap: normal;
    white-space: normal;
}

Steps to reproduce

1. Add a snipped above to skeleton-starter-flow-spring project. Don't forget the CSS file.
2. Enter "p" to filter field and press Enter.
3. The second root element will be drawn incorrectly.

Environment

Vaadin version(s): 24.3.10

Browsers

Issue is not browser related

Confirmed. Here's how it looks like when the screen is narrow. Note, resizing the window makes it look correct.

This is not a clean workaround but it does the job at least in the case of the provided example: place the following inside the value change listener:

treeGrid.getElement().executeJs("queueMicrotask(() => requestAnimationFrame(() => this.__virtualizer.__adapter._update()))");

A potential fix for the bug in https://github.com/vaadin/web-components/pull/7400