[Bug Report][3.7.2] VDataTableVirtual New Items may not be rendered if scroll position is not initial

[grolu]

Environment

Vuetify Version: 3.7.2
Vue Version: 3.5.11
Browsers: Chrome 129.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

Use the Vuetify Playground link. You can either reduce the items using the switch or filter the items using the text input. In both cases the table will not render all items after resetting the switch / filter text. This only happens when the scroll position is not initial (at the top). The issue resolves itself if you start scrolling the table.

Expected Behavior

All items appear

Actual Behavior

Only parts of the table rendered.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

There was already an issue for this: #18926
This issue has been closed. However, this is clearly a bug that renders VirtualDataTable unusable in our scenario with a reactive data source. While a potential workaround is to reset the scroll position when the filter changes, the issue could still arise when the data updates due to the dynamic nature of our source.

[rousos87]

Hey @grolu.

I have the same issue with virtual-scroll and search input. Did you find any way to fix it?

Thanks

[J-Sek]

Upon inspection, there is a bug in how browsers handle scroll after reducing content height in scrollable containers.
I was able to easily reproduce it even on the dumbest MDN example.

1. Scroll to the bottom
2. Open DevTools and reduce inner element height from 200px to 20px
3. scrollend is not fired

Vuetify internally depends on scrollend to reset scroll direction. In the scenario from the playground, scroll direction is changed upon items reduction, but is not reset and execution cannot go through this if statement.

[rousos87]

Hi @J-Sek.

Thanks for your reply and explanation. I checked the MDN example and I noticed the issue as well. Btw I've tested your fix locally, and it is working as expected. Hope to see this PR merged soon.