In Vaadin 13, Grid.asMultiSelect().select(Collection)) can throw a Javascript error (cannot select style of undefined) when pageSize is less than the collection size.

[campbellbartlett]

Description

In Vaadin 13 (Beta2) when using Grid.asMultiSelect().select(Collection) a JavaScript error is thrown if the row number of one of the elements to select is greater than the page size of the grid.

The stacktrace is:

Uncaught TypeError: Cannot read property 'style' of undefined
    at HTMLElement.grid.cellClassNameGenerator (gridConnector.js:950)
    at vaadin-grid-styling-mixin.html:64
    at Array.forEach (<anonymous>)
    at HTMLElement._generateCellClassNames (vaadin-grid-styling-mixin.html:59)
    at HTMLElement._updateItem (vaadin-grid.html:657)
    at HTMLElement.grid._updateItem (gridConnector.js:412)
    at vaadin-grid-selection-mixin.html:82
    at Array.forEach (<anonymous>)
    at HTMLElement._selectedItemsChanged (vaadin-grid-selection-mixin.html:81)
    at Object.runMethodEffect [as fn] (property-effects.html:818)
    at runEffectsForProperty (property-effects.html:162)
    at runEffects (property-effects.html:128)
    at HTMLElement._propertiesChanged (property-effects.html:1662)
    at HTMLElement.s._propertiesChanged (client-28831013082792340517B7074033EF04.cache.js:983)
    at HTMLElement._flushProperties (properties-changed.html:341)
    at HTMLElement._flushProperties (property-effects.html:1510)
    at HTMLElement._invalidateProperties (property-effects.html:1482)
    at HTMLElement.notifyPath (property-effects.html:2004)
    at notifySplices (property-effects.html:989)
    at notifySplice (property-effects.html:1011)
    at HTMLElement.push (property-effects.html:1843)
    at HTMLElement.selectItem (vaadin-grid-selection-mixin.html:47)
    at Object.grid.$connector.doSelection (gridConnector.js:139)
    at Object.grid.$connector.set (gridConnector.js:582)
    at Object.eval (eval at jt (client-28831013082792340517B7074033EF04.cache.js:975), <anonymous>:3:15)
    at jt (client-28831013082792340517B7074033EF04.cache.js:975)
    at it (client-28831013082792340517B7074033EF04.cache.js:931)
    at gt (client-28831013082792340517B7074033EF04.cache.js:562)
    at Pq (client-28831013082792340517B7074033EF04.cache.js:482)
    at lr.mr [as W] (client-28831013082792340517B7074033EF04.cache.js:983)
    at eA (client-28831013082792340517B7074033EF04.cache.js:866)
    at Rq (client-28831013082792340517B7074033EF04.cache.js:978)
    at fr.gr [as D] (client-28831013082792340517B7074033EF04.cache.js:983)
    at Bj (client-28831013082792340517B7074033EF04.cache.js:409)
    at Jq (client-28831013082792340517B7074033EF04.cache.js:979)
    at Kq (client-28831013082792340517B7074033EF04.cache.js:963)
    at Ws.Ys [as qb] (client-28831013082792340517B7074033EF04.cache.js:983)
    at IA.JA [as K] (client-28831013082792340517B7074033EF04.cache.js:983)
    at XMLHttpRequest.<anonymous> (client-28831013082792340517B7074033EF04.cache.js:572)
    at sb (client-28831013082792340517B7074033EF04.cache.js:413)
    at vb (client-28831013082792340517B7074033EF04.cache.js:850)
    at XMLHttpRequest.<anonymous> (client-28831013082792340517B7074033EF04.cache.js:592)

Live Demo

Here is a repository with a simple demo:
https://github.com/campbellbartlett/vaadin-style-undefined-error
This demo uses the Vaadin Spring Boot template.

Steps to reproduce

Clone the repository linked above.
Run with mvn spring-boot:run
Open localhost:8080

Browsers Affected

• Chrome (version 73)
• Firefox (version 66)

This is my code:

@Route
public class MainView extends VerticalLayout {

    public MainView() {

        int pageSize = 5;
        int numItems = 20;

        List<Item> items = new ArrayList<>();

        for (int i = 0; i < numItems; i++) {
            items.add(new Item(i % 3 == 0, i));
        }

        Grid<Item> grid = new Grid<>();

        grid.setDataProvider(DataProvider.ofCollection(items));
        grid.addColumn(item -> item.value);
        grid.setSelectionMode(Grid.SelectionMode.MULTI);

        grid.setPageSize(pageSize);

        grid.asMultiSelect().select(items.stream()
                .filter(Item::isSelected)
                .collect(Collectors.toList())
        );

        add(grid);
    }

    private class Item {
        private boolean selected;
        private int value;

        Item(boolean selected, int value) {
            this.selected = selected;
            this.value = value;
        }

        private boolean isSelected() {
            return this.selected;
        }
    }
}

When pageSize is less than numItems the error is thrown in the browser when opening the view.

[campbellbartlett]

For anyone else that comes across this issue, we are setting the page size for the grid to the size of the list such as:

grid.setPageSize(list.size());
grid.setDataProvider(new ListDataProvider<>(list));

I could see this being problematic when the list is huge but for our purposes this works for now.

[allenvpn312]

I came across the same issue. If I don't set setPageSize() the error goes away.

[campbellbartlett]

I came across the same issue. If I don't set setPageSize() the error goes away.

Usually when you don’t setPageSize() it defaults to 50. So in your case maybe 50 is greater than the number of items in your list?

[allenvpn312]

I tested against the list size of 1 and 500 and the error does not show up if not using setPageSize().

[campbellbartlett]

I tested against the list size of 1 and 500 and the error does not show up if not using setPageSize().

Awesome, that will be helpful for us if we come across the problem again. Thanks!

[allenvpn312]

Tested DataProvider.withConfigurableFilter() and no errors. Hope this helps.

[masbaehr]

still came across this error

setting setPageSize to the list count is not a solution when using lazy loading unfortunately

The error seems to happen only if i select an item BEFORE the table has finished rendering

[web-padawan]

The original error Uncaught TypeError: Cannot read property 'style' of undefined was caused by the web component behavior: the cell class name generator was incorrectly executed for the rows that the data provider was still loading.

This bug has been fixed by vaadin/web-components#3789 which landed in Vaadin 23.0.10. Closing.