ghenry22
commented
3 months ago If any part of the first ROW is showing in the viewport when you navigate away and back, then all is ok.
As soon as the first ROW is scrolled out of the viewport then the behaviour is seen. The entire list will re-render and it will jump to a scrollposition further down the list.
Also noted that on the list view scrollposition is 0,2922. click to go to detail view, scrollPosition goes to 0,0. Click to go back to list, scrollPosition is 0,10842. Not sure where it is getting the new value from or why but that would seem to be why it's always scrolling down the list randomly.
The min and max index values also change and shift upwards.
When on the detail view page (away from the list) I note that itemsPerRow goes to 0 and renderedItems goes to 1 (the first item in the list. List view does the same but in list view the itemsPerRow stays at 1. Perhaps when grid is enabled the itemsPerRow value should be maintained and at least that many items kept in the renderedItems array. This would align the behaviour with the list view. It might be what is causing a change to be detected as the items per row changes in grid view when navigating back and forth.
I think this may be all related to the calculation for itemsPerRow. When in list view the logic for this shortcircuits to always be 1. when in grid view it is calculated based on the clientWidth property of the Scroll Container. If the Scroll Container is hidden then clientWidth will return as 0 resulting in 0 itemsPerRow when in grid mode. Then when you come back it gets calculated again causing a change.
https://github.com/angular/material/issues/578 This is an old issue but describes similar symptoms.
With gridEnabled set to false AND viewCache set to enabled or any number.
Items are displayed in a list, everything works nice. Good first render, good scroll performance all looks good. Click on any item to go to the detail view for the item, works great Click the back button in the browser or navigate back programmatically (angular router) and we see:
With gridEnabled set to true AND viewCache set to enabled or any number.
Items are displayed in a grid, everything works nice. Good first render, good scroll performance, recalcs items per row on resize. Click any item to go to the detail view for the item, works great Click the back button in the browser or navigate back programmatically (angular router) and here we see the problem:
So it seems that for some reason when in grid view the the viewCache either gets purged or the view is not cached when navigating away and back. This happens ONLY in grid view. It can be recreated with a simple list of items with an image in each item (I happen to be using ionic framework with angular).
I can only suspect that maybe the items per row gets recalculated or something which triggers a change and purges the view cache and causes a redraw? The items per row seems to be the big difference between grid and row which is what makes me think about this.
@lVlyke would be amazing if you could have a look, I'm more than happy to test a debug version or something if you setup a branch, just let me know. Aside from this one thing the library is working great and I really want to use it in the latest version of my app specifically for the list and grid switching.