[Bug Report][3.7.1] v-virtual-scroll will not scroll to newly created item using scrollToIndex

[griffinallen]

Environment

Vuetify Version: 3.7.1
Vue Version: 3.5.6
Browsers: Chrome 128.0.0.0
OS: Windows 10

Steps to reproduce

1. Create the virtual scroll container and initialize it with a bunch of random items

• the list must extend beyond the height of the container
• the container must have the height and item-height properties

2. Create a button for adding an item to the list
3. Upon clicking the button, add an item to the list and use "scrollToIndex" with the index being the length of the list

Expected Behavior

The list should be scrolled so that the newest added item is now visible.

Actual Behavior

The list scrolls such that the second to last item is visible, but the newly added item is still not visible.

Reproduction Link

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

[KaelWD]

It has a frame debounce, you will have to use requestAnimationFrame instead of nextTick:

vuetify/packages/vuetify/src/composables/virtual.ts

Lines 184 to 187 in 7d3557a

	function calculateVisibleItems () {
	cancelAnimationFrame(raf)
	raf = requestAnimationFrame(_calculateVisibleItems)
	}

scrollToIndex should be async and wait for render before returning.

setTimeout(50) might work sometimes but will break if you get a frame that takes over 50ms.

[griffinallen]

It has a frame debounce, you will have to use requestAnimationFrame instead of nextTick:

vuetify/packages/vuetify/src/composables/virtual.ts

Lines 184 to 187 in 7d3557a

	function calculateVisibleItems () {
	cancelAnimationFrame(raf)
	raf = requestAnimationFrame(_calculateVisibleItems)
	}

scrollToIndex should be async and wait for render before returning.

setTimeout(50) might work sometimes but will break if you get a frame that takes over 50ms.

I have tried your instructions and it solves one part of the issue. When you are at the bottom of the list and add another item, it now displays the next item. However, if you are not add the bottom of the list and add another item, it will still scroll to the second to last item in the list.

Maybe I have misunderstood your instructions. Can you provide a working example?

See my code here:
https://play.vuetifyjs.com/#eNptUslu2zAQ/ZUH9RAXpRe5ddoattFcCvTc3OIcWImOiVKUwsVwIOjfMyTlRUkOEsl5b9Y3D21mTTG9a5rJwYtsma2cqBrFndhsNbA6jHnTxGt8FLV2XGphelM0/nMavwoli//rbcbLcvR5m23oXE0jdk09SOM8V2NbmFqpEwAYsSPfHv2bwOwCLyVVZYkRz2tkL+TT3hGSz2bN8Z3P+IzPFxfwXBHVdGoXn0qx414FbovgyyB1KY7oqJuLQ3AxsO5FCWKm8EvMFyH5gBaI5aZtQ6iuW03pMYgydZchxuf13JPp7bxOOhAwFCJYkk6DOPQkR9k4WOF8klFWTW0c2jByBi2O7p6EQ4edqSvc0BLcBEeAMliHgSRYBy+S9wxHPXrzQ84wZ/jK8I1hwXDL8J3hB8NPhnxGH+E5EXJi5ETJiZPfPlK0EI/bF11g53XhZK0R1whtajhmmRy48mLSeLsfXRuU0E9ujy/IY1049zSiAOvNKUbYsWcvrLvTsuIhx2/DK/GWhGHHfY40/vv6T1iID7L3mYGuv6WzC3okBWj2Wce0Vyr+Hl8B9cQQDQ==

[MaxenceMouchard]

This look like my closed issue

[griffinallen]

This look like my closed issue

Did your solution work for you? I still seem to get the same error with your solution.

If you are already on the last element and add another, it correctly scrolls to the newly added element. However, if you aren't at the bottom of the list, it scrolls to the second to last element.

[jflemingframe]

also affecting me

[jflemingframe]

what i had going on was after scrolling to bottom, a moment later the scrollHeight would increase by an item's height. The list size wasn't changing.
Ended up doing setTimeout 250ms and doing requestAnimationFrame scrollToIndex again after the initial scroll.

[griffinallen]

what i had going on was after scrolling to bottom, a moment later the scrollHeight would increase by an item's height. The list size wasn't changing. Ended up doing setTimeout 250ms and doing requestAnimationFrame scrollToIndex again after the initial scroll.

This works for me too. Still hoping the correct fix gets implemented soon, but this works for the time being.

[rousos87]

Hi @KaelWD,

I am encountering the same issue with onMounted. I am trying to go to the last item; however, it displays the previous item instead. I have also attempted to resolve this using setTimeout, but without luck.

VPlay

Thanks

[griffinallen]

Hi @KaelWD,

I am encountering the same issue with onMounted. I am trying to go to the last item; however, it displays the previous item instead. I have also attempted to resolve this using setTimeout, but without luck.

VPlay

Thanks

Here's a workaround fix for you. Should be okay until the proper solution is implemented.

https://play.vuetifyjs.com/#eNqVUcFO6zAQ/JVR3oEiuW2c9/qAqq3EkQMneqMcotQFC9eOErsURfl31nbTNHDiEMfemZ3dnX1ukroqpvdlOTk4kcyThRX7UuVWrDYaWBzGeVmGa3gURttcalGdQiF4kJV1uRrXRWWU6gCgErvlJjmhTxFMenguqVRNjPC/RN6EfH2zhGRpWh5/5Ix7fNaD546op24G/NmKXe6U5zbwuQxSb8UR7Sa5SPApFWr7qQQxo/wc2cwXH9A8cbtqGi/VtospPQYqU9s7E56XZsbQd786cwkYuusj0fyBDj0pUZYWtbAu7kbuS1NZNN5yBi2Odi2LdwajH43TVmzRYleZPa5oyVdeA6BitcVgO1h6gdF1D4fVnMLPsVHOkDH8ZfjHMGP4z3DDcMtwx8BT+gjnRODE4EThxOFE4sTiROPEy1LmtV6okP/n9acusHO6sNJoRFtG12hiwUGLk0OunJhEzto8+GWOsjS0TEofubTn+eMg8D6t5V4YZ0ekulx1wr+SbmnaeG/9cXZ2KNn1Hnh0LqZxV7SlpGXaKRWOly8TLQ2Z

[rousos87]

Hi @griffinallen,

I tested it and is working. Quick fix until the proper solution. Thanks for the help, greatly appreciated.