bug(cdk-virtual-scroll): Only shows a few items when using scrollWindow property

[mcrtricolor]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When you use the scrollWindow property it only renderers the initial items (the ones inside your min and max buffer settings) after that it is just blank spaces.

It also happens at the angular material show case example, it only show the first 21 items. I tried to use the checkViewportSize() method but of no use.

https://material.angular.io/cdk/scrolling/overview

Reproduction

https://stackblitz.com/edit/angular-1uahhp?file=src/app/cdk-virtual-scroll-window-scrolling-example.ts

Steps to reproduce:

1. It already happens on the virtual scrolling window example.

Expected Behavior

It should render new items as you scroll down the page, eventually rendering all the items.

Actual Behavior

It stops rendering items after the initial ones are rendered.

Environment

• Angular: 14.1.0
• CDK/Material: 14.1.0
• Browser(s): Chrome, Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): Windows, macOS

[mcrtricolor]

Hi Zach, thanks for the notice! It's now edited with the proper link. Thanks again Martín Corbacho El lun, 25 jul 2022 a las 13:59, Zach Arend ***@***.***>) escribió:

…

Hello @mcrtricolor <https://github.com/mcrtricolor> , I clicked the above stackblitz link, but it takes me to the stackblitz homepage. Sometimes the URL in the address bar isn't the URL for sharing. Could you please click "Share" on the top bar to get the link to the editor and share it here? [image: image] <https://user-images.githubusercontent.com/7720245/180833392-7a97847b-0a17-4071-896d-1965b44253fc.png> — Reply to this email directly, view it on GitHub <#25336 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQYE523MWLBPR5LUZGXRSXDVV3BVVANCNFSM54SJXLAA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[zarend]

Thanks for reporting @mcrtricolor , I'm confirming that I can reproduce on both my mac and my windows machine.

Windows 10 Enterprise, Version 20H2 | Crhome Version 103.0.5060.134 (Official Build) (64-bit)
MacOS 12.4 (21F79) | Chrome Version 103.0.5060.134 (Official Build) (x86_64)

[zarend]

Do you know what version this used to work with?

[mcrtricolor]

I think this property scrollWindow is new, i was using 14.0.6 and had to update it to 14.1.0 in order to use it. Thanks. Martín Corbacho El lun, 25 jul 2022 a las 14:26, Zach Arend ***@***.***>) escribió:

…

Do you know what version this used to work with? — Reply to this email directly, view it on GitHub <#25336 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQYE52YP4YFAYNL6TNZ65EDVV3E4RANCNFSM54SJXLAA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[zarend]

I tried upgrading to 14.1.0 in https://stackblitz.com/edit/angular-vszuks, and it didn't seem to help. @crisbeto is this something you could look at?

[aydex]

I got this bug after upgrading from 13.3.9 to 14.1.0

[daniel-zero]

I also can confirm this bug. Just take a look at the StackBlitz demo linked in the official CDK docs: https://stackblitz.com/run?file=src%2Fapp%2Fcdk-virtual-scroll-window-scrolling-example.ts

The example should render 10k elements but only the first 23 elements are rendered

[ckieber]

I can also confirm this issue on the StackBlitz demo page. I tried different browsers as well such as Chrome and Edge and both show the same behavior.

[mikeyamashita]

looks like it is still an issue in 14.2.5