Rerendering problem with DynamicScroller

[MaxWaltenberger]

trafficstars

Describe the bug

Hi, first off my setup info:

I am using Vue 2.7 with composition API and vue-virtual-scroller 1.1.2.

My problem:

I am using a virtual scroll list of expandable items. The expand-mechanism is very trivial and just uses a boolean "collapsed". If collapsed is true I only show the first index of the array and if collapsed is false I show the whole array. Collapsed is toggled with a simple button inside the expandable item.

Now when I try to expand an item and the height of this item changes, the whole list gets rerendered and collapsed jumps back to default (true). Which results in a broken layout: the items below the expanded one get pushed down but the content is no shown only if I click a second time on the collapsed toggle.

Very important information: this problem only came through the change from options API to composition API. We made no functional changes to the code we just update the syntaxes.

The DynamicScroller implementation: <stream-loader v-if="loading" class="list stream-loader" /> <DynamicScroller v-else ref="dynamicScroller" class="list" key-field="id" :items="items" :min-item-size="72" @scroll.native.passive="handleScroll" > <template #default="{ item, index, active }"> <DynamicScrollerItem :item="item" :active="active" :data-index="index"> <container-item v-if="index > -1" :key="index" :container="item" class="container-item" /> </DynamicScrollerItem> </template> <template #after><div class="list-after" /></template> </DynamicScroller>

Maybe someone has experienced the same problem. I am really desperate please help 😁

Thanks in advance !

Reproduction

Use Vue 2.7 with composition API and vue-virtual-scroller 1.1.2 and make items in DynamicScroller expandable (with a boolean toggle).

System Info

Vue 2.7 with composition API
vue-virtual-scroller 1.1.2

Used Package Manager

npm

Validations

• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[ghost]

I've done absolutely the same behavior (table with single items and expandable groups of items). I use Vue 3 with composition API. Unfortunately I was struggling with a lot of issues as well as other users of the lib.

For example, https://github.com/Akryum/vue-virtual-scroller/issues/811 which is related to 2 other issues. Also I haven't solved the critical issue - if you pass computed property to DynamicScroller items property, then when it is changed, you can see in a debugger that items are changed, but DynamicScrollerItem didn't get the new value and it's item property is not updated.

I was tried to call the author of the lib, but he just closed my issue, and move another one to discussions and ignored it. He is working now on another project and looks like he doesn't care about the lib maintenance anymore, so I recommend you to look at another lib or implement the virtual scroll on your own. Otherwise you will spend a time.to return to the entry point in the end of your journey with this lib.

[patchthecode]

I am having the exact issue as @tastytea-github How is something this big not encountered by anyone else?

I use a computed property as the data source of this lib. When the data is changed, i see that the data in pinia is correctly changed, but the dynamic scroller still has some old data.

[patchthecode]

The work around is to add a key to the scroller and manually toggle the boolean key true/false. This forces the scroller to refresh its data.

[alexmccabe]

@patchthecode do you have an example of this? I tried to implement it, and it didn't work

[patchthecode]

const someKey = false

<scroller :key="someKey"> ....

And then somewhere in your code when the update happens, do

someKey.value = !someKey.value

Because you toggled the value and it changed, vue is forced to refresh the scroller, thereby causing the update.

[alexmccabe]

@patchthecode and this is the dynamic-scroller component? I tried this exact thing and it caused a full re-render and the expanded child item would never be expanded.

We have multiple child components that can be expanded individually. I was trying to change the key as you suggested and it didn't work. I appreciate the suggestion though, I was really hopeful it would work for us

[patchthecode]

@alexmccabe my usecase was a simple one. The child components didnt have states like isExpanded.

I guess you may have to come up with a creative solution which somehow saves the states for your use case. But since my case was simple (just a simple refresh) it worked for me. I guess maybe someone can find a true solution.

[alexmccabe]

@patchthecode Thanks for this. Unfortunately it wasn't possible for us to resolve it, and we've had to change our UI

[Ra1nko]

Had somewhat similar problem with DynamicScroller. Downgrading to v1.1.1 helped me in my case