Infinite scrolling with pagination from API

[pavlos-elpidorou]

Hello there,

I am currently trying to implement this component in our application but i am having an issue with loading paginated results.

Our backend is laravel and we are using the standard Laravel resources with pagination. My issue is that i haven't found a way to know when the Multiselect has reached to the end of the current results in order for me to call the api again with the incremented page size.

Is there any way to implement this with this package?

Thanks :)

[egerb]

Hi there @pavlos-elpidorou have the same issue...

[KirdesMF]

It's a bit tricky but you can achieve what you want by grabbing the .multiselect-options and after that you have access to the list items and you can use Intersection observer or use the container and add an scroll event listener

[egerb]

@KirdesMF thank you a lot for explanation, will try

[KirdesMF]

you can simply use the slot afterlist as item to observe. I'm on an old version actually so that's why I need to make some trick.

[Ana-CRK]

@egerb hi, i'm currently struggling with the same issue. Any chances you've figured out how it works?

[nkutinha]

Hi, this is quite easy to do using a custom component.

<template>
  <multiselect ref="dropdown" v-model="value">
    <template v-for="(_, slot) in $slots" #[slot]="scope">
      <slot :name="slot" v-bind="scope || {}" />
    </template>
  </multiselect>
</template>

<script>
import Multiselect from '@vueform/multiselect';

export default {
  components: {
    Multiselect,
  },
  props: ['modelValue', 'checkInfiniteScroll'],
  emits: ['update:modelValue', 'infinite-scroll'],
  computed: {
    value: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit('update:modelValue', value);
      },
    },
  },
  mounted() {
    if (this.checkInfiniteScroll) {
      const list = this.$el.querySelector('.dropdown');
      list.addEventListener('scroll', () => this.determineIfEndOfScroll(list));
    }
  },
  beforeUnmount() {
    if (this.checkInfiniteScroll) {
      const list = this.$el.querySelector('.dropdown');
      list.removeEventListener('scroll', () => this.determineIfEndOfScroll(list));
    }
  },
  methods: {
    determineIfEndOfScroll(list) {
      if (list.clientHeight !== list.scrollHeight && list.scrollTop + list.clientHeight >= list.scrollHeight) {
        this.$emit('infinite-scroll');
      }
    },
  },
};
</script>

You should now be able to set checkInfiniteScroll to true then listen to the @infinite-scroll event to load more data.

[semics-tech]

I'm also struggling with this issue. These workarounds are good but is there a plan to fix the actual functionality for infinite scroll?

[muhammadhendrahaqq]

Hi, im also having issue with this, maybe is there any official solution to handle pagination from server-side? or more clearer way to handle this ? thanks everyone for the help or answer.

[DavidVaness]

stumbled upon this issue today, would be great to have this included

[Severino]

I have the same problem. The infinite options seems to be only working locally and not emitting an event when it fetches new options.

I used @KirdesMF workaround adding a IntersectionObserver to the list triggering the api calls. Which works okay but is not very satisfactory.