Grid with enabled virtual scrolling (rows and columns) cause all rows to disappear randomly while scrolling

[kdikov82]

Example replicating the issue:

• https://stackblitz.com/edit/react-u6s5vf-jhz8tv?file=app%2Fmain.jsx

Steps to reproduce:

1. Open the example in new window
2. Scroll to the middle of the Grid`s scrollbar fast and let go of the scroll. Almost every time (but not always), the rows will not be visible.
3. Scrolling up or down with the mouse wheel will show the rows

Another issue is that some of the top rows might also not be visible when scrolling up (randomly).
The scrolling is extremely slow even with reduced number of columns.

[kdikov82]

Additional note:
On machine with one monitor, the was not replicated.

When the problem was reported, it was stated that it is observed on machines with external monitors.
Also, I am observing the issue on machine with two monitors.

[kdikov82]

Recordings of the issue can be found in the following ticket:
https://supportheroes.telerik.com/ticket/1559645

[InaGlushkova]

A related issue was reported under #1278

[InaGlushkova]

A related issue was reported again under ticket 1562443.

Additional information about the issue:

When a filter that does not change the data count is applied grid shows an empty state until you scroll.

1. Go to this example: https://stackblitz.com/edit/react-1u4myn?file=app/main.jsx
2. Scroll about 50 items.
3. Change the filter of the Discontinued column to "Check all"

When you reset the table skip value 0 (or any other value) grid shows an empty state until you scroll.

1. Go to this example: https://stackblitz.com/edit/react-1u4myn?file=app/main.jsx
2. Scroll about 50 items.
3. Click the Set Skip 0 button

When you set the initial skip to some value grid shows correct data but when you start scrolling it sets the skip to 0.

1. Go to this example: https://stackblitz.com/edit/react-1u4myn?file=app/main.jsx
2. Change skip in line 18 to 50
3. Start scrolling it will reset skip to 0

[InaGlushkova]

Reported again under ticket 1563407.

[InaGlushkova]

Reported again under: 1566225

[filipKovachev]

Reported again in 1578093

[nstoychev]

It looks resolved with version 5.10.1.

Here is the updated example: https://stackblitz.com/edit/react-u6s5vf-p1w9vp?file=app%2Fmain.jsx

[da1z]

When a filter that does not change the data count is applied grid shows an empty state until you scroll.

1. Go to this example: https://stackblitz.com/edit/react-1u4myn?file=app/main.jsx
2. Scroll about 50 items.
3. Change the filter of the Discontinued column to "Check all"

@nstoychev this one is still reproducible

[nstoychev]

@da1z This case will not be covered in this issue. I logged it here: #1488.

[nstoychev]

Example with React 18 createRoot API using version 5.11.1-dev.202302071533: https://stackblitz.com/edit/react-u6s5vf-15yxcx?file=app%2Fmain.jsx

[da1z]

@nstoychev
thanks! with setting skip to 0 I was trying to scroll grid to top, with your example it works!

But as for this:

When a filter that does not change the data count is applied grid shows an empty state until you scroll.

Go to this example: https://stackblitz.com/edit/react-1u4myn?file=app/main.jsx
Scroll about 50 items.
Change the filter of the Discontinued column to "Check all"

The issue is different. When you change filters so rows count does not change, as for example selecting all options in filter, the grid becomes empty until scroll

[nstoychev]

@da1z

When a filter that does not change the data count is applied grid shows an empty state until you scroll.

This is resolved in 5.11.1-dev.202302131506 - Changelog is here.

Example: https://stackblitz.com/edit/react-1u4myn-yegn7d?file=app%2Fmain.jsx.