DataTable: VirtualScroller Resets Scroll Position to top on lazy load more data

[bwhitt]

Describe the bug

I added this first into the discussions. But i believe this fits more into issues. https://github.com/orgs/primefaces/discussions/908

I'm trying to use the DataTable component with the Virtual Scroller option. However, i'm having an issue when i use lazy load more to populate more data for an infinite query.

The issue is that the scroll window resets to the top when new data is added

If i use the virtual scroller alone, i do not have this issue.
Gif of virtual scroller alone functioning:

Gif of data table alone resetting scroll position to 0

The code is basically identical:
Virtual Scroller:

LoadMore Function:

Background: I'm using tanstack vue query useInfiniteQuery

Check out code sandbox link in reproducer.

Reproducer

https://codesandbox.io/p/devbox/z2ffnt?file=%2Fsrc%2FApp.vue%3A14%2C1&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clranqwny0006356hn77v7tao%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clranqwny0002356hvekiv8a8%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clranqwny0003356hhsjokf7t%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clranqwny0005356hsnf2a2f3%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B48.16105164858846%252C51.83894835141154%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clranqwny0002356hvekiv8a8%2522%253A%257B%2522id%2522%253A%2522clranqwny0002356hvekiv8a8%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Froot%252F.cache%252Fnpm%252F_logs%252F2024-01-12T13_13_29_608Z-debug-0.log%2522%252C%2522id%2522%253A%2522clrant29500g0356hz7vhgxhc%2522%252C%2522mode%2522%253A%2522temporary%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clraozun00002356htntf7bnp%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A14%252C%2522startColumn%2522%253A1%252C%2522endLineNumber%2522%253A14%252C%2522endColumn%2522%253A1%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.vue%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clraozun00002356htntf7bnp%2522%257D%252C%2522clranqwny0005356hsnf2a2f3%2522%253A%257B%2522id%2522%253A%2522clranqwny0005356hsnf2a2f3%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A5173%252C%2522id%2522%253A%2522clrao85qk0113356hbr5khh9h%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clrao85qk0113356hbr5khh9h%2522%257D%252C%2522clranqwny0003356hhsjokf7t%2522%253A%257B%2522id%2522%253A%2522clranqwny0003356hhsjokf7t%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clranrgp2004g356hefen8x0a%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clranrgps000jefhwft876f69%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clranrgp2004g356hefen8x0a%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

PrimeVue version

3.46.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Chrome

Steps to reproduce the behavior

Go to code sandbox

Start scrolling down on data table

Scroll towards bottom to trigger lazy load load more

Watch scroll position reset to the top.

Compare to Virtual Scroller component

Scroll down

Watch scroll position not reset to the top but stay where it is

Expected behavior

Wish to have have current scroll position not reset to the top upon adding new data to datatable virtual scroller as shown on virtual scroller component by itself.

[mertsincan]

Hmm, thanks a lot for your report! We'll check it asap but, I set this ticket to another milestone instead of the next version to examine it in more detail. Thanks a lot for your understanding!