vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
445 stars 83 forks source link

Grid not refreshing correctly when placed into a dialog which is resized #6431

Open Levaimate opened 1 year ago

Levaimate commented 1 year ago

Description

I added a grid with a large amount of rows into a resizable dialog. When the grid is scrolled to the bottom and the dialog is resized (made taller) the grid can get stuck, most of it can be empty. This is only fixed when scrolling into the grid or resizing the dialog back and forth. image

Expected outcome

The grid should always be filled with data upon resizing the container dialog.

Minimal reproducible example

Button theButton = new Button("open dialog");
        Dialog dialog = new Dialog();
        Grid<String> grid = new Grid<>();
        grid.setSizeFull();
        grid.addColumn(String::toString).setHeader("name");
        grid.setItems(generateItems(10000));
        HorizontalLayout layout = new HorizontalLayout(grid);
        layout.setSizeFull();
        dialog.add(layout);
        dialog.setResizable(true);
        dialog.setDraggable(true);

        theButton.addClickListener(event -> {
            dialog.open();
        });

        add(theButton);

    private List<String> generateItems(int num) {
        List<String> list = new ArrayList<>();
        Random random = new Random();
        for (int i = 0; i < num; i++) {
            list.add(String.valueOf(random.nextInt(1000)));
        }
        return list;
    }

Steps to reproduce

  1. Open the dialog (ideally at a small size so it can be made bigger)
  2. Scroll the grid to the bottom (not fully necessary but it makes it easier to reproduce)
  3. Resize the dialog so the grid inside can fit more items
  4. Sometimes after resizing the top of the grid stays empty, with only a few items listed at the bottom

Environment

Vaadin version(s): 24.1.4 OS: Windows 10

Browsers

Chrome

tomivirkki commented 1 year ago

The issue also produces in https://vaadin.com/docs/latest/components/dialog#resizable

Even the V14 example has the issue (you have to expand the dialog higher though to see it because V14 grid had more rows by default): https://vaadin.com/docs/v14/ds/components/dialog#resizable

tomivirkki commented 1 year ago

This is a bug in the iron-list virtual scrolling engine. Needs another workaround to the adapter.