Some items not showing after kept-alive parent component is activated after being deactivated.

[marceloatg]

trafficstars

Hi, I'm experiencing this random issue where the application has tabs to show content to user, the tabs are inside keep-alive tags in order to not constantly refresh them.

Some of the tabs have a component called slds-virtual-table, which is build upon vue-virtual-scroller.

When creating the tab, the slds-virtual-table is properly created (let's call it tab 1), as seen bellow:

Then, if another tab is selected, the tab 1 is deactivated. When tab 1 is clicked, it will be activated again, and then we see the following bug:

Some of the items have the transform: translateY way bellow the screen size, thus not showing up inside the slds-virtual-table.

If the vue-virtual-scroller container is scrolled a bit, the vue-virtual-scroller will correct all items and show the item in the proper place again, as seen bellow:

So far I'm having a hard time fixing this behavior, any ideas on what might be happening here?

Thank you in advance and for your amazing work!

[Akryum]

Could you provide some sort of reproduction I can run?

[marceloatg]

Of course, I'll create another repo with the bare minimum code to reproduction. Just to be really clear, the issue as I sad before is random, sometimes it occurs and sometimes it doesn't.

As soon as I have the repo, I'll comment here.

Once again, thank you.

[marceloatg]

I got the repo with the necessary code for reproduction. I tested on chrome and could reproduce the issue almost 100% of the times following the instructions in the readme file.

If you need anything else, just ask me. I hope it helps.

https://github.com/marceloatg/slds-virtual-table

Thanks!

[marceloatg]

Little update, I was able to fix the problem in my project. I did some testing and the problem seems to be when the activated life cycle method is called it resets the scroll position of the vue-virtual-scroller wrapper.

Somehow the vue-virtual-scroller does not react properly to this reset and then we see the bug.

My solution was to store the scrolltop property everytime the user scroll the wrapper, and when the activated method is called the saved scrolltop is set to the wrapper element. This way vue-virtual-scroller is able to recalculate everything again in the correct way.