bug(cdk-virtualscroll): Virtual scrolling is jumpy when the scroller part contains a material Autocomplete and page features an echart

[bbarn3y]

Ran into this very weird issue, I spent more than a day debugging until I managed to reproduce that virtual scrolling becomes spazzy when the page features a chart created by the echarts library and the virtually scrolled elements contain an input with a formControl and matAutocomplete attached to them.

Reproduction

StackBlitz example: https://stackblitz.com/edit/angular-virtual-scrolling-qndtbk

Steps to reproduce:

1. Create a virtual scroll viewport that features elements containing an input that has a formControl and a matAutocomplete attached to it.
   The default value of the formControl should not be empty.
2. Add an echart (https://www.npmjs.com/package/echarts) to the page. It can be anywhere, doesn't have to part of the virtual scroll viewport.

Expected Behavior

I expected virtual scrolling to work buttery smooth like it does if I either:

• Remove the formControl from the inputs.
• Remove the [matAutocomplete]="..." from the inputs.
• Remove the chart component (containing only an echart) from the page.

Now, I can't do the first two in my application, I'll try using another charting library though.

Actual Behavior

Spazzyness. If you try to scroll down, scrolling is sometimes jumpy other time it seems like you're scrolling up, even though you are trying to scroll down.

Environment

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

[liuydyyy]

hello，have u solve the probleam？

[bbarn3y]

hello，have u solve the probleam？

Hi! Sadly no, we swapped echarts to another charting library, but that's probably not acceptable for most projects.