Crash on store.add() in a grouped grid rendered inside invisible element.

[amurashin]

Hello there!

We've come across an issue that requires some very specific circumstances. In one of our applications, grid instances are displayed in separate Salesforce tabs but their stores are populated from a central location. This leads to some grids being loaded whilst they are invisible (rendered inside inactive tab, which is an element with display:none style). When this happens, and if the grid is also configured with a group feature, then an exception occurs on store.add() as the grid is trying to figure out whether or not to animate the newly inserted rows.

Explicitly disabling transition.insertRecord resolves the issue. It's only when this config is missing or enabled and the grid is checking the index of the lastVisibleRow that when exception occurs (lastVisibleRow is undefined) in onStoreAdd handler.

I was able to reproduce this scenario in an online example.

1. Open the Grouping demo.

2. Comment out grid's store config.

3. Add the following code at the bottom.

document.querySelector('#container').style.display = 'none';
grid.store.add(DataGenerator.generateData(50));
document.querySelector('#container').style.display = 'block';

Expected behaviour:

• The grid renders with data.

Observed behaviour:

• An error is thrown: "Cannot read properties of undefined (reading 'index')".

• The container element remains hidden.

To summarise, the issue occurs when transition.insertRecord enabled, the store is grouped, and the grid is rendered inside of a hidden element.

[marcio]

Hey Aleksei,

Thanks for reaching out and for the detailed report.

I created a ticket to fix that, please follow the updates here https://github.com/bryntum/support/issues/12907.