Virtual scroll content disappear when change tabs
marceloavf opened this issue · comments
Describe the bug
Hi, I'm having a problem with a component that uses Virtual Scrolling when changing tabs with vue-router-tab
To Reproduce
Steps to reproduce the behavior:
- Wait for the data to load in.
- Scroll horizontally to activate virtual scroll changes (it also happens when there is a lot of data vertically)
- Go to another tab (about)
- Then come back home, you will see it blank, but if you scroll in a little it'll come back.
https://codesandbox.io/s/relaxed-voice-m1hwb?file=/src/components/HelloWorld.vue
Expected behavior
Expected to be able to see data even when changing tabs, from where we were.
Screenshots
When enters the page:
When changes tab after virtual scrolls actives:
Development Environment (please complete the following information):
- Node.js: v12.4.0 - v14
- Vue: v2.6.12
- Vue Router v3.4.9
- Vue Router Tab v1.2.3
Operating Environment (please complete the following information):
- Device: Desktop
- OS: Ubuntu
- Browser: Chrome
- Version: 87
Additional context
If it's not really related to vue-router-tab, feel free to close it, thank you.
One way that I found to bring it back was to call repaint() method after it get back from keep-alive instance with activated lifecycle hook.
Use the following code to replace the RouterTab component, it can still reproduce the problem.
Frame.vue
<keep-alive>
<router-view />
</keep-alive>
RouterTab is based on KeepAlive and RouterView components, so this problem will also exist.
Your solution is correct, RouterTab can still respond to the activated hook.