search

diprokon / ng-table-virtual-scroll

Virtual Scroll for Angular Material Table
https://diprokon.github.io/ng-table-virtual-scroll
MIT License
135 stars 42 forks source link

Angular Material Tab lost data #7

Closed riwos closed 4 years ago

riwos commented 4 years ago

🐞 BUG REPORT

Description When using angular material tab (8.2.3) and then you are trying scroll on down then data is gone for some reason.. You must refresh page to get table with data again..

🔬 Minimal Reproduction https://stackblitz.com/edit/angular-material-tab-example-uca6w3

🔥 Exception or Error None

🌍 Your Environment

Screenshot 2020-02-13 at 23 53 08

Any ideas ??

ps. Awesome solution. I am glad and happy you did it !! Many thanks 🗡

riwos commented 4 years ago

I've created PR: https://github.com/diprokon/ng-table-virtual-scroll/pull/8 - The problem is with method 'getViewportSize()' when on this case always returns zero.. Have a look for quick fix on my PR @diprokon ;)

diprokon commented 4 years ago

Hi @riwos ! Thanks for your contributing, I very appreciate this! With your example and PR, it was very easy to understand and found the problem :)

The problem really is in the 'getViewportSize()', but it looks like it is not in scope of this directive. It appears when you combine cdk-virtual-scroll-viewport with mat-tabs. Please, check this ticket: https://github.com/angular/components/issues/15622

As a solution, your PR will force people to provide the directive with more data, what is not necessary. I will like to avoid this. On the other hand, the directive, can sometimes call the 'checkViewportSize()' of the viewport, but this operation is not cheap and it will be better to know, when it is required. Considering all this, I propose to call 'checkViewportSize()' outside of the directive, when you change the tab. I made a workaround for your example: https://stackblitz.com/edit/angular-material-tab-example-d14bat?file=src/app/app.component.ts

Please, check it and let me know what you think about it

riwos commented 4 years ago

Hi @diprokon ,

I did not know that issue already exists. I am big fan of sentence: "less code is better" so I will cancel my PR because of we do not need anymore :) Your solution is everything what I need so far 👍

I do not know what do you think but I have noticed that method 'updateContent()' and then internal method 'getViewportSize()' is called every time when you scroll down but the value is always that same like height who is defined on inline styles. Maybe we could call this method only once. I do not know that it is a big improvement and does it have impact for performance but maybe you can consider ;)

However thank you for you support !! Happy I have this solution :)

You feel free to close this ticket.

blogcraft commented 3 years ago

This is kind of problematic... I have the Mat Tab in a parent component than the child components that use the VirtualScroll 😕