Vue-select: Infinite scroll

[yash-habilelabs]

I want to implement infinite scroll using this and also want to hide the search box.
How can i achieve this?
Any help will be appriciate.

[eddybrando]

Regarding the search box, this is documented here: https://vue-select.org/api/props.html#searchable.

For the infinite scroll part of the question, I believe you should explain what you want to achieve more precisely, as there can be many ways to understand your request (i.e. after the last option comes the first again vs. after the last option more options get fetched and presented).

Also, please try and use the project issue templates.

[yash-habilelabs]

@eddybrando thanks for the reply,
i want the item of the dropdown should be added by api call when you reach at the end of the list

[exabyteso]

Hi @eddybrando and @yash-habilelabs I want to affirm that this is an important feature. I recommend that at least a scroll listener be implemented on the vSelect component with basic info on the following:

1. Scroll position
2. Scroll direction
3. ScrollX and ScrollY

I can't use the vSelect component with a paginated API as a result of this gap. Let me know if there are any workarounds.

[eddybrando]

Hi @eddybrando and @yash-habilelabs I want to affirm that this is an important feature. I recommend that at least a scroll listener be implemented on the vSelect component with basic info on the following:

1. Scroll position
2. Scroll direction
3. ScrollX and ScrollY

I can't use the vSelect component with a paginated API as a result of this gap. Let me know if there are any workarounds.

In order to get all that info I can only imagine listening for the scrolling event, which is kind of expensive, isn't it?

I could imagine maybe achieving something like emitting an event trigger by the Intersection Observer API, but then it wouldn't support IE without a polyfill. But I honestly don't know about the support scope of vue-select, so maybe this isn't even an issue.

Could you please maybe help illustrate why you need the 3/4 values you listed with some use case examples?

This may be helpful in order to asses if this should be a build-in functionality or not, to avoid increasing vue-select's size and complexity unless necessary.

[cwilby]

@eddybrando debouncing could be used to improve performance, the event still fires, but only triggers the handler after a certain amount of time.

[yellow1912]

Is there any update on this? I think in the worst case we could add a loadMore text that people can click on to trigger the load?

[exabyteso]

Hi @yellow1912 and @eddybrando . @eddybrando This is a basic illustration of why having the items mentioned above is important:

1. Scroll position - the use case would be calling the API as a certain percentage point of visibility for a better user experience i.e. instead of waiting for the end of the select to call the api, one can specify that the call should happen when 50pc of the items are visible.
2. Scroll direction - scrolling up would trigger calls to the former pages of the paginated API and scrolling down the latter pages of the paginated API e.g. let's say the user is viewing page 5 in the select. As they scroll up, page 4..3 etc would be called, and as they scroll down page 6..7 etc would be called. To do this, I'd need information on the scroll position, and the scroll direction to know what page to call when.
3. Scroll X, and Scroll Y - this is related to the use case of item 1 - calling the api ahead of time before the list is at the end as well as knowing the division of pages on the infinite scroll.

Here's a demo (which I've borrowed) of the infinite scrolling feature (http://vueinfinitescroll.clickvalley.in/). I don't like the fact that the data fetch is only done at the end of the scroll which makes for a slow transition between pages hence why I think above 3 features would be most beneficial to users of the vue select who would like to integrate vue select with a paginated api with smooth transitions.

On a side note, the app I was developing which used vue-select is now in production... @yellow1912 I append and remove a load more button (which isn't best practice) to the end of each page but fortunately the client doesn't mind! These are a few rough ideas which I will appreciate your inputs to crystalize.

[sagalbot]

I had started on this back in September, but ran into plenty of hurdles to overcome and didn't get too far. The scroll listener is expensive, but throttling it will help. I do like the idea of leveraging the IntersectionObserver API because it's fast and straightforward. Maybe there's a way to use IntersectionObservers to emit events when the list has been scrolled 25%, 50%, 75%, 100%.

I'm near-complete on a minor release bump, so I'll move onto this when that's wrapped. If anyone wants to take a crack at it in the meantime, more than happy to review a PR.

[cwilby]

Unrelated, welcome back @sagalbot!

[exabyteso]

I had started on this back in September, but ran into plenty of hurdles to overcome and didn't get too far. The scroll listener is expensive, but throttling it will help. I do like the idea of leveraging the IntersectionObserver API because it's fast and straightforward. Maybe there's a way to use IntersectionObservers to emit events when the list has been scrolled 25%, 50%, 75%, 100%.

I'm near-complete on a minor release bump, so I'll move onto this when that's wrapped. If anyone wants to take a crack at it in the meantime, more than happy to review a PR.

@sagalbot Kindly let me know any other recommendations you may have. I'd like to take a shot at adding this feature.

[eddybrando]

I had started on this back in September, but ran into plenty of hurdles to overcome and didn't get too far. The scroll listener is expensive, but throttling it will help. I do like the idea of leveraging the IntersectionObserver API because it's fast and straightforward. Maybe there's a way to use IntersectionObservers to emit events when the list has been scrolled 25%, 50%, 75%, 100%.
I'm near-complete on a minor release bump, so I'll move onto this when that's wrapped. If anyone wants to take a crack at it in the meantime, more than happy to review a PR.

@sagalbot Kindly let me know any other recommendations you may have. I'd like to take a shot at adding this feature.

Should we give the IntersectionObserver API a try? I could also try to find some free time to help on the development.

[github-actions[bot]]

:tada: This issue has been resolved in version 3.9.0 :tada:\n\nThe release is available on GitHub release\n\nPlease consider sponsoring Vue Select, your support is much appreciated! :+1:

[sagalbot]

Eventually I may have first party infinite scroll baked in, but it's implementable in a wrapper component now.

https://vue-select.org/guide/infinite-scroll.html