web-components
web-components copied to clipboard
[grid] DataProvider called twice or sort column change
Description
The DataProvider callback is called twice when sorting on a different column. The first time params.sortOrders is empty and the second time params.sortOrders contains the last clicked column's sort information.
Expected outcome
If sorting on a different column, the callback of the DataProvider should only be called once, with the sort information of the clicked column.
Actual outcome
Two requests are made to the REST API where the first one is needless.
I'm also experiencing this and it seems to be present on the demo as well.
e.g.
Set
<vaadin-grid .dataProvider="${provider}">
<vaadin-grid-sort-column path="name" header="Name" direction="asc"></vaadin-grid-sort-column>
</vaadin-grid>
function provider({sortOrders}, callback) {
const {path, direction} = sortOrders[0];
const field = path ? `?sort_field=${path}` : '';
const dir = direction ? `&sort_direction=${direction}` : '';
fetch(`/animals${field}${dir}`).then(() => {
callback();
});
}
This results in GET /animals and then GET /animals?sort_field=name&sort_direction=asc

If you don't set direction="asc" on the sort-column this doesn't happen.
The issue is reproducible at least in 24.2 when one of the sorter component has a direction set initially:
<vaadin-grid item-id-path="name">
<vaadin-grid-sort-column path="name" direction="asc"></vaadin-grid-sort-column>
</vaadin-grid>
In 24.3, surprisingly, the grid does not render items at all when a sorter has an initial direction. This is certainly a regression that should be reported: https://github.com/vaadin/web-components/issues/6849