Bug introduced in v1.1.2, possible cause in description

Krisell commented 1 year ago

Describe the bug

After updating to v1.1.2 we started seeing some strange issues in lists using DynamicScroller. Data seems to be reused from other rows. Downgrading to v1.1.1 resolved the issue. Looking at the diff between these two versions, we noticed a highly suspicious code change.

view.item is an object in our case, and keyField defines how to compare this with existing elements. Direct strict object equality doesn't work even if the objects would have the same contents.

Are we using the library wrong, or is this an unintended change?

Manually reverting this line resolves the problem (with the rest of the code from v1.1.2).

Reproduction

The current issue is deep within our application, and I'm hoping the description above is clear enough. If it is not, I will try to reproduce with something smaller.

System Info

System:
    OS: macOS 13.0.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 101.58 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.3.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 9.1.1 - ~/node_modules/.bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Chrome Canary: 111.0.5486.0
    Firefox: 106.0.2
    Safari: 16.1
  npmPackages:
    vue: ^2.6.14 => 2.6.14
    vue-virtual-scroller: ^1.1.2 => 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.

Vissie2 commented 1 year ago

I'm not familiar with the source code but for version 2.x this probably got fixed by: https://github.com/Akryum/vue-virtual-scroller/commit/395bbfb73588455795ecc5b144281ce5fda042ff. I'm not sure if there is a reason why this is not implemented for version 1.x yet or if it is even compatible.

Oleksii14 commented 1 year ago

I am having the same issue

Oleksii14 commented 1 year ago

@Akryum this is critical, could push a fix for Vue 2?

Krisell commented 1 year ago

@Akryum this is critical, could push a fix for Vue 2?

You can lock to 1.1.1 while awaiting a fix.

beatgrabe commented 1 year ago

Hey. I can confirm this issue. Had some similiar problems with rows, that are collapsable. This did not work with 1.1.2, because a height from another row was taken, so I could expand them, but minimizing again failed. Using 1.1.1 solved the issue.

beatgrabe commented 1 year ago

I created a reproduction sample:

https://codesandbox.io/s/charming-carson-3cy5c4

When you clicked on the "Toggle" Button, the row may get minimized but leaving a white gap below. With 1.1.1 this does not happen.

leonied7 commented 1 year ago

1.1.1 is broken, DynamicScroller crashed in this version https://github.com/Akryum/vue-virtual-scroller/issues/758

Akryum / vue-virtual-scroller