Strange behaviour using grid.scrollToEnd (Vaadin 4.1.x)

Hi there,

yesterday I noticed a strange behaviour: Lines disappear in the grid after calling scrollToEnd:

@Route(value = "test")
public class TestUi extends VerticalLayout {

    List<String> content = new ArrayList();

    public TestUi() {
        setDefaultHorizontalComponentAlignment(Alignment.STRETCH);
        setSizeFull();
        Grid<String> grid = new Grid<>();
        grid.addThemeVariants(GridVariant.LUMO_COMPACT, GridVariant.LUMO_NO_ROW_BORDERS);
        grid.removeThemeVariants(GridVariant.LUMO_ROW_STRIPES);
        grid.addColumn(String::toString);
        grid.setDataProvider(DataProvider.fromCallbacks(query -> {
            return content.stream().skip(query.getOffset()).limit(query.getLimit());
        }, query -> {
            return content.size();
        }));
        setFlexGrow(4, grid);
        add(grid);

        TextField textField = new TextField();
        textField.addKeyDownListener(Key.ENTER, event -> {
            content.add(textField.getValue());
            textField.clear();
            grid.getDataProvider().refreshAll();
            grid.scrollToEnd(); // <- REMOVE THIS AND IT WORKS (BUT OF COURSE DOESN'T SCROLL ANYMORE)
        });
        add(textField);
    }
}

The first two lines are ok. But after adding the third line (and calling scrollToEnd) the first line disappears.

Anyone ever noticed that behaviour?

Thanks

18213850.png
18213853.png
18213856.png

Hi!

It looks like there’s a bug. Some client-side updates are happening in the wrong order.

As a workaround, you can postpone scrollToEnd until the end of the request handling like this:

UI.getCurrent().beforeClientResponse(grid, ctx -> grid.scrollToEnd());

Bug reported: https://github.com/vaadin/vaadin-grid-flow/issues/944

Oh thank you for the quick response, the GitHub issue and the workaround

Regards

Hi,

since 14.4.3 it happens again (for tree grid) and I can’t find a workaround any more.

To sum it up:

Since 14.4.3 none of it works. Since displaying a tree and do an initial expand/scroll should be basic working functionality I wonder if anyone got a workaround I don’t know?

Test code:

public class GridScrollUi extends HorizontalLayout implements AfterNavigationObserver {

    private final List<Double> values;

    public GridScrollUi() {
        super();
        setDefaultVerticalComponentAlignment(Alignment.STRETCH);
        values = DoubleStream.generate(Math::random)
                .filter(item -> item != Double.MIN_VALUE)
                .limit(10000)
                .boxed()
                .collect(Collectors.toList());
    }

    @Override
    public void afterNavigation(AfterNavigationEvent afterNavigationEvent) {
        VerticalLayout layout = new VerticalLayout();

        List<Double> roots = new ArrayList<>();
        roots.add(Double.MIN_VALUE);

        TreeGrid<Double> treeGrid = new TreeGrid<>();
        treeGrid.addHierarchyColumn(item -> item);
        treeGrid.setItems(roots, value -> {
            if (value == null) {
                return roots;
            } else if (value == Double.MIN_VALUE) {
                return values;
            } else {
                return new ArrayList<>();
            }
        });
        layout.add(treeGrid);
        add(layout);

        // Initial scroll to bottom
        treeGrid.expand(Double.MIN_VALUE);
        int pos = values.size() - 1;
        treeGrid.select(values.get(pos));
        treeGrid.scrollToIndex(pos);
    }

Created issue: https://github.com/vaadin/vaadin-grid/issues/2107