[SL-GRID] Items not properly re-rendered after scroll

[jnolles]

Provide a general summary of the issue here

After scrolling down, and updating the datasource, replacing the complete list of items, the grid will show rows with old data. By resizing the (browser) screen the grid re-renders and the correct data is displayed.

🤔 Expected Behavior?

It should fully re-render rows after replacing the items in the datasource.

😯 Current Behavior

Some rows display old data after replacing all items in the datasource

💁 Possible Solution

Workaround:

Set grid.dataSource to undefined, wait a tick, and re-set grid.dataSource with the new ArrayDataSource instance.

  #createDataSource(users: UserOverviewItem[] = []): void {
    if (this.dataSource) {
      this.dataSource.removeEventListener('sl-update', this.#onDataSourceUpdate);
      this.dataSource = undefined;
    }

    setTimeout(() => {
      // Create new data source
      this.dataSource = new ArrayDataSource(users.map(mapUserOverviewItemToUserGridItem));
      this.dataSource.addEventListener('sl-update', this.#onDataSourceUpdate);

      this.dataSource.update();
    }, 0);
  }

🖥️ Steps to Reproduce

1. Attach a datasource with lots of items to the grid
2. Scroll down a few rows (not too far!), e.g. 5 to 10 rows
3. Now click on a button which will set a new collection of items to the datagrid, a collection of a few items (e.g. 5 items)
4. The correct number of rows will be displayed, but with the wrong contents
5. Resize the Browser Window
6. The grid is updated, now displaying the correct row contents

https://github.com/user-attachments/assets/258ff8cc-d717-4457-8cc1-f20484cc1ef9

What browsers are you seeing the problem on? (only for bugs in code)

Firefox, Microsoft Edge

If other, please specify.

• Encountered in sl-grid version 0.1.13, and 0.1.6. Latest 0.1.14 does not work because of a run-time error
• Worked without issues in sl-grid version 0.0.36

What operating system are you using?

Windows 11

👤 Your name

Jorn Nolles

🧢 Your product/team

Magsiter

🎨 Your Theme(s)

Magister

[jpzwarte]

An error is thrown on the console in the above scenario. This explains why the old data remains on the page. Preventing that error from happening causes the data to update correctly.