components
components copied to clipboard
angular
Expansion panel expanded state issue with Virtual Scroll
Bug, feature request, or proposal:
cdkVirtualScroll does not work properly with matAccordion and matExpansionPanel.
The accordion does not respect the expansion state of individual expansion panels as you scroll.
What is the expected behavior?
The expansion state is maintained as you scroll
What is the current behavior?
If you expand the xth item in the accordion then as you scroll, the xth in the view will always be expanded. ie if you expand the 3rd item then as you scroll down to say the 1000th item then the 1003rd item will be expanded.
What are the steps to reproduce?
What is the use-case or motivation for changing an existing behavior?
Able to use expansion panels inside virtual scroll
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular 7.0 Material 7.0 MacOS 10.14 TypeScript 3.x Browser Chrome 70.0
Is there anything else we should know?
No
Looks like this is happening because the virtual scroll is reusing the template, which has a state that is not being reset.
As a workaround you can set the template cache size for the cdkVirtualFor to 0 and since the template is not reused, it works as expected.
<mat-expansion-panel *cdkVirtualFor="let item of items, templateCache = 0">
<mat-expansion-panel *cdkVirtualFor="let item of items; templateCacheSize: 0">
works as a work around
@trevorsmiley
<mat-expansion-panel *cdkVirtualFor="let item of items; templateCacheSize: 0">
Its not quiet good, because when u scroll with open element, everything is jumping.... When will be the fix for that @mmalerba
For now its not possible to use CDK virtual scroll with Angular Material Ui
