VirtualScroller: scrollInView method does not scroll to right item, when item is dynamically added

[adam-koller]

Describe the bug

VirtualScroller: scrollInView method does not scroll to right item, when item is dynamically added
Same issue applies to DataTable when using VirtualScroller feature.

Reproducer

https://stackblitz.com/edit/qe6t4tk3?file=src%2FApp.vue

PrimeVue version

4.2.5

Vue version

3.4.29

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Chrome

Steps to reproduce the behavior

Place a VirtualScroller component on the page.
Add an item to the items array.
Use the ScrollInView method, to scroll to the newly created item on the very bottom.
Observe, that it is not fully scrolling to the bottom.

Expected behavior

ScrollInView method shall display the newly created item on the very bottom of the VirtualScroller.

[github-actions]

Due to PrimeVue team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. ✨ Thank you for your contribution! ✨

[adam-koller]

After some code analysis, I believe this is due to a change in Vue's watch functionality.
See: https://v3-migration.vuejs.org/breaking-changes/watch#_3-x-syntax
Also see: https://stackoverflow.com/questions/62729380/vue-watch-outputs-same-oldvalue-and-newvalue

If items are added to the items array of the VirtualScroller component, the watcher is not executed and component parameters are therewith not re-computed based on the updated number of items.

A potential fix to the items watcher could look as follows (without respecting, if the array changed at all).

        items: {
            handler(newValue) {
                this.init();
                this.calculateAutoSize();
            },
            deep: true
        },

Hope this helps and can be fixed in an upcoming release. Thank you.

[MstrVLT]

After some code analysis, I believe this is due to a change in Vue's watch functionality. See: https://v3-migration.vuejs.org/breaking-changes/watch#_3-x-syntax Also see: https://stackoverflow.com/questions/62729380/vue-watch-outputs-same-oldvalue-and-newvalue

If items are added to the items array of the VirtualScroller component, the watcher is not executed and component parameters are therewith not re-computed based on the updated number of items.

A potential fix to the items watcher could look as follows (without respecting, if the array changed at all).

        items: {
            handler(newValue) {
                this.init();
                this.calculateAutoSize();
            },
            deep: true
        },

Hope this helps and can be fixed in an upcoming release. Thank you.

These changes are not enough. if you scroll to the bottom of the list you risk calling onScrollPositionChange many times.
I added an additional check

Reproducer: https://rdjblce9.stackblitz.io