Lightning tree grid rendering issue when changing displayed data (filtering)

Question

I'm trying to add a filtering functionality to a lightning-tree-grid component. The filter happens by selecting a record from a list above, and then the component filters the data that is shown on the lightning-tree-grid one. The filtering seems to work fine, except that when the filter is applied the checkboxes on the lightning-tree-grid are reset.

I have come to the conclusion that this is most likely a rendering issue on the lightning-tree-component, because when I click the little chevron on a selected item, the checkboxes are re-applied. Also, the list of selected items is not modified internally either.

Is there a way to "force" the rendering of the lightning-tree-grid component to re-apply the filters every time its data property is modified?

Answer 1

This issue can be fixed by assigning the values again to the selected-rows attribute. This can be done asynchronously with setTimeout:

// considering that "selectedRows" is the attribute holding the Array used
// by lightning-tree-grid in the component, and that "rows" holds the copy
// of the Array:

const rows = this.selectedRows;
this.selectedRows = [];

// eslint-disable-next-line @lwc/lwc/no-async-operation
setTimeout(
  (() => {
    this.selectedRows = rows;
    // eslint-disable-next-line no-extra-bind
  }).bind(this),
  10
);

Note: doing this without setTimeout does not seem to work, hence why the low timeout milliseconds (10), so the user doesn't notice the async operation.