Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(virtual): patch unreliable scrollend event #20757

Closed
wants to merge 1 commit into from

Conversation

J-Sek
Copy link
Contributor

@J-Sek J-Sek commented Dec 4, 2024

Description

Context:

  • initial items array size should be at least 50 (or more on taller screens or zoom out)
  • items reduction should eliminate scrollbar to effectively trigger scroll (easiest to achieve by reducing array to as many items as fit on the screen)

Diagnosis leads me to a rather dumb patch - force call of scrollend handler when scroll was triggered shortly after items were changed.

Shortly = 0.3s
Debounce = 0.1s

I did not want to use nextTick not rAF, because delay between items change and scroll handler execution may be impacted by browser load (or device performance characteristics).

fixes #20566

Markup:

<template>
  <v-data-table-virtual
    :headers="headers"
    :items="items"
    height="500"
    item-value="name"
    fixed-header
  >
  </v-data-table-virtual>
  <div class="ma-5 d-flex">
    <v-switch v-model="less" color="primary" label="Less Boats" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        headers: [
          { title: 'Boat Type', align: 'start', key: 'name' },
          { title: 'Speed (knots)', align: 'start', key: 'speed' },
          { title: 'Length (m)', align: 'start', key: 'length' },
          { title: 'Price ($)', align: 'start', key: 'price' },
          { title: 'Year', align: 'start', key: 'year' },
        ],
        boats: Array.from({ length: 80 }).map((_, i) => ({
          name: `Speedster #${i}`,
          speed: 35,
          length: 22,
          price: 300000,
          year: 2021,
        })),
        less: false,
      }
    },
    computed: {
      items() {
        if (this.less) {
          return this.boats.slice(0, 3)
        }
        return this.boats
      },
    },
  }
</script>

@J-Sek J-Sek self-assigned this Dec 4, 2024
@J-Sek J-Sek added T: bug Functionality that does not work as intended/expected C: VVirtualScroll C: VDataTableVirtual labels Dec 4, 2024
@J-Sek J-Sek requested a review from KaelWD December 7, 2024 12:47
@KaelWD
Copy link
Member

KaelWD commented Dec 9, 2024

This doesn't even need the lastItemsChange, just a timeout in case scrollend never fires for any reason. I've also made it a bit longer so we don't end up with two calls if the real scrollend does fire.

@KaelWD KaelWD closed this in 4a628a3 Dec 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VDataTableVirtual C: VVirtualScroll T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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