Items overlap

[simionato-mobisec]

Describe the bug

I followed what is written here to implement a dynamic scroller, but looks like the items overlap.

Reproduction

MyDynamicScroller.vue

<template>
  <DynamicScroller
    style="height: 500px;"
    :items="items"
    :min-item-size="24"
  >
    <template #default="{ item, index, active }">
      <DynamicScrollerItem
        :item="item"
        :active="active"
        :size-dependencies="[item]"
        :data-index="index"
      >
        {{ `${index} ${item}` }}
      </DynamicScrollerItem>
    </template>
  </DynamicScroller>
</template>

<script>
export default {

  data() {
    return {
      items: []
    }
  },

  created() {
    this.findMessages()
  },

  methods: {

    findMessages() {
      MessageService.findAll().then(
        ({ data }) => {
          this.items = data
        },
        err => {
          console.log(err)
        }
      )
    }
  }
}
</script>

Messages have variable heights, with a min height of 24px. This is the output:

As you can see, items are overlapped (don't pay attention to weird chars).

Used Package Manager

npm

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[vsambor]

I had the same issue with the RecycleScroller, when the list changes sometimes (especially the first time, but not only) the items would overlap.
And as a workaround I found that you have to recreate the entire component. This is how I did it.

const shouldUpdateScroller = ref(true);

// When my list data updates
watch(list, () => {
    // Force scroller to refresh;
    shouldUpdateScroller.value = false;
    nextTick(() => {
        shouldUpdateScroller.value = true;
    });
});

// Then in the template

<RecycleScroller
                v-if="list.length > 0 && shouldUpdateScroller"
                ...
 />

It's sad the lib is not maintained anymore :(