Bug 32474 - Implement infinite scroll in vue-select
Summary: Implement infinite scroll in vue-select
Status: Pushed to main
Alias: None
Product: Koha
Classification: Unclassified
Component: Architecture, internals, and plumbing (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Matt Blenkinsop
QA Contact: Martin Renvoize
URL:
Keywords:
Depends on: 32468 33623 34219
Blocks: 32493 36012 32494
  Show dependency treegraph
 
Reported: 2022-12-15 09:44 UTC by Martin Renvoize
Modified: 2024-03-11 10:28 UTC (History)
7 users (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
24.05.00


Attachments
Bug 32474: Infinite scrolling of selects (5.09 MB, patch)
2022-12-15 13:11 UTC, Matt Blenkinsop
Details | Diff | Splinter Review
Test data population script (3.86 KB, text/javascript)
2022-12-19 16:56 UTC, Matt Blenkinsop
Details
Bug 32474: Ajax based infinite scroll selects (28.67 KB, patch)
2022-12-19 16:59 UTC, Matt Blenkinsop
Details | Diff | Splinter Review
Bug 32474: Ajax based infinite scroll selects (28.69 KB, patch)
2023-01-09 12:11 UTC, Matt Blenkinsop
Details | Diff | Splinter Review
Bug 32474: Ajax based infinite scroll selects (26.48 KB, patch)
2023-01-09 12:37 UTC, Matt Blenkinsop
Details | Diff | Splinter Review
Bug 32474: Ajax based infinite scroll selects (26.39 KB, patch)
2023-01-09 17:05 UTC, Lucas Gass
Details | Diff | Splinter Review
Data creation script (1.51 KB, text/javascript)
2023-04-21 10:50 UTC, Matt Blenkinsop
Details
Bug 32474: Infinite scroll v-selects (9.70 KB, patch)
2023-04-21 11:09 UTC, Matt Blenkinsop
Details | Diff | Splinter Review
Bug 32474: Do not fetch all the licenses (1.75 KB, patch)
2023-04-27 07:00 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Allow getAll to pass params (1.33 KB, patch)
2023-04-27 07:00 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Properly call getAll (2.51 KB, patch)
2023-04-27 07:00 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Properly call getAll (2.51 KB, patch)
2023-04-27 07:54 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Fix duplicate API call (5.48 KB, patch)
2023-04-27 14:40 UTC, Matt Blenkinsop
Details | Diff | Splinter Review
Bug 32474: Fix duplicate API call (5.78 KB, patch)
2023-04-27 15:39 UTC, Matt Blenkinsop
Details | Diff | Splinter Review
Bug 32474: Fix duplicate API call (5.78 KB, patch)
2023-04-27 15:41 UTC, Matt Blenkinsop
Details | Diff | Splinter Review
Bug 32474: Infinite scroll v-selects (9.68 KB, patch)
2023-07-07 06:14 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Do not fetch all the licenses (1.75 KB, patch)
2023-07-07 06:14 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Properly call getAll (2.51 KB, patch)
2023-07-07 06:14 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Fix duplicate API call (5.77 KB, patch)
2023-07-07 06:14 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: TEST ONLY - DO NOT PUSH (3.99 KB, patch)
2023-07-31 14:05 UTC, Matt Blenkinsop
Details | Diff | Splinter Review
Bug 32474: Fix scroll bump when new data loads (1.21 KB, patch)
2023-09-29 15:10 UTC, Matt Blenkinsop
Details | Diff | Splinter Review
Bug 32474: Infinite scroll v-selects (9.75 KB, patch)
2023-10-03 06:52 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Do not fetch all the licenses (1.82 KB, patch)
2023-10-03 06:52 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Properly call getAll (2.58 KB, patch)
2023-10-03 06:52 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Fix duplicate API call (5.84 KB, patch)
2023-10-03 06:52 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Fix scroll bump when new data loads (1.26 KB, patch)
2023-10-03 06:52 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Infinite scroll v-selects (9.84 KB, patch)
2023-10-03 07:14 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 32474: Do not fetch all the licenses (1.88 KB, patch)
2023-10-03 07:14 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 32474: Properly call getAll (2.64 KB, patch)
2023-10-03 07:14 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 32474: Fix duplicate API call (5.90 KB, patch)
2023-10-03 07:14 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 32474: Fix scroll bump when new data loads (1.32 KB, patch)
2023-10-03 07:14 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 32474: Fix required (1.08 KB, patch)
2023-10-03 07:58 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Adjust tests - X-Total-Count (1.94 KB, patch)
2023-10-03 07:59 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Pass label and identifier (4.35 KB, patch)
2023-10-03 08:28 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Adjust tests (2.60 KB, patch)
2023-10-03 14:32 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Pass label and identifier (4.17 KB, patch)
2023-10-03 14:32 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Fix required (1.16 KB, patch)
2023-11-29 11:30 UTC, Matt Blenkinsop
Details | Diff | Splinter Review
Bug 32474: Adjust tests - X-Total-Count (2.02 KB, patch)
2023-11-29 11:30 UTC, Matt Blenkinsop
Details | Diff | Splinter Review
Bug 32474: Adjust tests (2.68 KB, patch)
2023-11-29 11:30 UTC, Matt Blenkinsop
Details | Diff | Splinter Review
Bug 32474: Pass label and identifier (4.25 KB, patch)
2023-11-29 11:30 UTC, Matt Blenkinsop
Details | Diff | Splinter Review
Bug 32474: Fix persistence of selections when pagination re-triggers (1.85 KB, patch)
2023-11-29 14:56 UTC, Matt Blenkinsop
Details | Diff | Splinter Review
Bug 32474: Fix persistence of selections when pagination re-triggers (2.54 KB, patch)
2023-11-29 15:59 UTC, Matt Blenkinsop
Details | Diff | Splinter Review
Bug 32474: Store the selected option label (1.92 KB, patch)
2023-11-30 09:36 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Add cypress tests (21.24 KB, patch)
2023-11-30 11:29 UTC, Matt Blenkinsop
Details | Diff | Splinter Review
Bug 32474: Store the selected option label (2.00 KB, patch)
2023-11-30 12:35 UTC, Matt Blenkinsop
Details | Diff | Splinter Review
Bug 32474: Infinite scroll v-selects (9.91 KB, patch)
2023-11-30 13:02 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Do not fetch all the licenses (1.95 KB, patch)
2023-11-30 13:02 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Properly call getAll (2.72 KB, patch)
2023-11-30 13:02 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Fix duplicate API call (5.98 KB, patch)
2023-11-30 13:02 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Fix scroll bump when new data loads (1.40 KB, patch)
2023-11-30 13:02 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Fix required (1.22 KB, patch)
2023-11-30 13:02 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Adjust tests - X-Total-Count (2.08 KB, patch)
2023-11-30 13:02 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Adjust tests (2.74 KB, patch)
2023-11-30 13:02 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Pass label and identifier (4.31 KB, patch)
2023-11-30 13:02 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Add cypress tests (21.30 KB, patch)
2023-11-30 13:02 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: Store the selected option label (2.05 KB, patch)
2023-11-30 13:02 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 32474: (follow-up): Tell the tests to wait for the intercepted request responses (1.88 KB, patch)
2024-02-02 10:30 UTC, Matt Blenkinsop
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Martin Renvoize 2022-12-15 09:44:17 UTC
We're using the vue-select component for our select pulldowns in ERM.

We could do with reaching feature parity with our select2 wrapper and part of that is to implement an ajax driven infinite scroll as suggested in bug 32468.
Comment 1 Matt Blenkinsop 2022-12-15 13:11:51 UTC
Created attachment 144614 [details] [review]
Bug 32474: Infinite scrolling of selects

Investigation of this shows that the data is loaded on first mount of the ERMMain.vue component and then cached in a Pinia store. This commit shows an example of an infinite scroll without the need for Ajax based scrolling as the data is already available and injected into AgreementsFormAdd.vue.

I don't think we need Ajax based scrolling on these vendor selects as the data is front-loaded and cached. Based on that we would have two options:
1) Keep the selects as they are currently with all data available as per Jonathan's patch in bug 32468
2) Use the infinite scrolling as per this commit and extract that logic into a new component that we can plug in to all the components that use a select for vendors

Let me know your thoughts, if you think option 2 is better then I am happy to pull that together

Test plan for this commit:
1) Create more than 20 new vendors, the more you create the more obvious the infinite scroll
2) Add a new agreement and observe that the vendor select limits the selection to 20 vendors
3) Apply patch
4) Add a new agreement and observe that the vendor select now loads more options as you scroll
Comment 2 Jonathan Druart 2022-12-15 13:55:24 UTC
If we are going with infinity scroll I think it should be ajax-based.
Only with this patch I am not sure I are getting much benefits.

The idea would be to avoid a big GET when loading the app that would retrieve thousands of vendors.

It's not an easy task, as we will want to implement it for other fetches (license, agreements, etc.) that populate dropdown lists.

Don't forget to not embed main.js in your patch :)
Comment 3 Matt Blenkinsop 2022-12-16 16:09:54 UTC
I think we could use a single component for this and pass the type of data (vendor, agreement, license) as a prop to this to determine which API route is called. I'll experiment with getting the Ajax scrolling to work in a re-useable component
Comment 4 Matt Blenkinsop 2022-12-19 16:56:07 UTC
Created attachment 144719 [details]
Test data population script
Comment 5 Matt Blenkinsop 2022-12-19 16:59:21 UTC
Created attachment 144720 [details] [review]
Bug 32474: Ajax based infinite scroll selects

I have created a reuseable component called InfiniteScrollSelect which allows v-selects to load options in a paginated manner through Ajax requests rather than making expensive Ajax calls when the select box is first opened. All v-selects that are likely to need this functionality have been updated for Agreements, Licenses, Packages and Vendors.

Test Plan:
To test this requires adding enough dummy data to show the pagination fully. I have written a script that does this, please see the attachments if you wish to use this.
1) Navigate to a window that offers a dropdown menu for either Vendors, Agreements, Licenses, Packages.
2) Observe that all data is already pre-loaded into the options list and only one request is made for this data regardless of data size
3) Apply patch
4) Navigate to the same select box and observe that only the first 20 values are available with paginated Ajax requests being made as you scroll down
Comment 6 Jonathan Druart 2023-01-02 08:51:58 UTC
I am getting a conflict, can you rebase please?

Also, could you run the tidy script, I am seeing invalid changes:

-            licenses: [],
+            licenses: [], 

(space at the end of the line)

Make sure you set up the pre-commit git hook https://wiki.koha-community.org/wiki/Tips_and_tricks#Hooks
Comment 7 Matt Blenkinsop 2023-01-09 12:11:57 UTC
Created attachment 145143 [details] [review]
Bug 32474: Ajax based infinite scroll selects

I have created a reuseable component called InfiniteScrollSelect which allows v-selects to load options in a paginated manner through Ajax requests rather than making expensive Ajax calls when the select box is first opened. All v-selects that are likely to need this functionality have been updated for Agreements, Licenses, Packages and Vendors.

Test Plan:
To test this requires adding enough dummy data to show the pagination fully. I have written a script that does this, please see the attachments if you wish to use this.
1) Navigate to a window that offers a dropdown menu for either Vendors, Agreements, Licenses, Packages.
2) Observe that all data is already pre-loaded into the options list and only one request is made for this data regardless of data size
3) Apply patch
4) Navigate to the same select box and observe that only the first 20 values are available with paginated Ajax requests being made as you scroll down
Comment 8 Matt Blenkinsop 2023-01-09 12:37:38 UTC
Created attachment 145144 [details] [review]
Bug 32474: Ajax based infinite scroll selects

I have created a reuseable component called InfiniteScrollSelect which allows v-selects to load options in a paginated manner through Ajax requests rather than making expensive Ajax calls when the select box is first opened. All v-selects that are likely to need this functionality have been updated for Agreements, Licenses, Packages and Vendors.

Test Plan:
To test this requires adding enough dummy data to show the pagination fully. I have written a script that does this, please see the attachments if you wish to use this.
1) Navigate to a window that offers a dropdown menu for either Vendors, Agreements, Licenses, Packages.
2) Observe that all data is already pre-loaded into the options list and only one request is made for this data regardless of data size
3) Apply patch
4) Navigate to the same select box and observe that only the first 20 values are available with paginated Ajax requests being made as you scroll down
Comment 9 Lucas Gass 2023-01-09 17:05:38 UTC
Created attachment 145154 [details] [review]
Bug 32474: Ajax based infinite scroll selects

I have created a reuseable component called InfiniteScrollSelect which allows v-selects to load options in a paginated manner through Ajax requests rather than making expensive Ajax calls when the select box is first opened. All v-selects that are likely to need this functionality have been updated for Agreements, Licenses, Packages and Vendors.

Test Plan:
To test this requires adding enough dummy data to show the pagination fully. I have written a script that does this, please see the attachments if you wish to use this.
1) Navigate to a window that offers a dropdown menu for either Vendors, Agreements, Licenses, Packages.
2) Observe that all data is already pre-loaded into the options list and only one request is made for this data regardless of data size
3) Apply patch
4) Navigate to the same select box and observe that only the first 20 values are available with paginated Ajax requests being made as you scroll down

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 10 Jonathan Druart 2023-01-31 09:29:00 UTC
I feel like we are trying to solve something that is not really a problem here, or I missed the original goal of this change.

I do see how it can be useful to use this component for some specific data, but I don't think it is relevant for vendors.

Anyway I've found 2 problematic behaviours with this patch:

* If you go to /cgi-bin/koha/erm/agreements/add you will see 2 fetches:
/api/v1/acquisitions/vendors?_per_page=-1
/api/v1/acquisitions/vendors?_page=1&_per_page=20

We can question the second fetch (and the next ones), why do we need to fetch if we fetched them all (and stored them) already?

* The filtering does not work, it only works on the items fetched already.
To recreate:
Go to /cgi-bin/koha/erm/agreements/add, don't scroll down, search for a vendor name that is not in the set we fetched already
=> The vendor is not displayed.

The main problem here is the first query that fetches all the vendors. And it will be hard to remove it as we need it for the column filtering feature.

We could still use the component for other data, but the filtering bug needs to be fixed then.
Comment 11 Jonathan Druart 2023-01-31 09:51:11 UTC
Additionally:

* This is only displayed for the second fetch.

+            <li v-show="hasNextPage" ref="load" class="loader">
+                {{ $__("Loading more options...") }}
+            </li>

To recreate (add a 'sleep 5' in Koha::REST::V1::Acquisitions::Vendors->list):
open the dropdown list
scroll down
=> You see "Loading more options..."
scroll down again
=> We are loading more options but there is no visual feedback.

* There is a frustrating behaviour, if you are at the bottom of the dropdown and it's still fetching, the scrollbar will hit the top when the new data are fetched (feel like a broken lift)

* this.limit += 10

What's the point of this?
Feel like this should be 20 (see returnedValuesPerPage)
If so we need a variable in store and retrieve it from there when we need it.
Comment 12 Jonathan Druart 2023-01-31 09:51:45 UTC
For discussion/failed QA. Let me know if you have any questions or need help!
Comment 13 Matt Blenkinsop 2023-04-21 10:50:27 UTC
Created attachment 150030 [details]
Data creation script

Script for creating licenses to test patch
Comment 14 Matt Blenkinsop 2023-04-21 11:09:19 UTC
Created attachment 150031 [details] [review]
Bug 32474: Infinite scroll v-selects

This patch is an example ajax based v-select. The v-select will load the first 20 items and then continue to load paginated sections of 20 items as the user scrolls down. The v-select also offers ajax based searches (unpaginated) and will return to 20 item pagination if the search is cleared.

Currently the pagination just works with an Intersection Observer based on scrolling - the main issue with this is that the size of the v-select window changes every time new data is added to the list and this causes the scrollbar to jump before resetting at the correct size. This can be a bit annoying, especially when scrolling quickly.

The only way round this will either be to paginate using buttons i.e. (previous/next page) or to limit the data to 20 items at all times and re-paginate when scrolling back up - interested to hear thoughts/suggestions on this or whether anyone has a magic CSS fix that solves it ;)

The new v-select is only in one location so far as a test - Agreement Licenses

Test plan:
1) You will need to add multiple licenses in order to see the pagination, attached is a script that will create 100 dummy licenses at a time if you wish to use that
2) Once licenses are created, apply patch and run yarn build
3) Navigate to Agreements and click the New Agreement button
4) Scroll down to the Add new license option and click the button
5) The License select is the InfiniteScrollSelect and should display the licenses you have added
6) Open the dropdown and 20 items will be listed
7) Scroll down and as you scroll, more items will be loaded (this can be seen in the Network tab in developer tools)
8) Enter a search query and the results should reflect the search query
9) Delete the search query and the dropdown should return to the first 20 paginated items and pagination will work again when scrolling
10) Try submitting the form with paginate/searched options and the form should still work as intended
Comment 15 Jonathan Druart 2023-04-27 06:50:51 UTC
Found some problems, this needs to depend on bug 33623, follow-ups coming.
Comment 16 Jonathan Druart 2023-04-27 07:00:01 UTC
Created attachment 150282 [details] [review]
Bug 32474: Do not fetch all the licenses

Otherwise we are loosing all the point of the pagination!
Comment 17 Jonathan Druart 2023-04-27 07:00:03 UTC
Created attachment 150283 [details] [review]
Bug 32474: Allow getAll to pass params

We may want to extend that to other getAll functions as well
Comment 18 Jonathan Druart 2023-04-27 07:00:07 UTC
Created attachment 150284 [details] [review]
Bug 32474: Properly call getAll

To encode q parameter correctly, based on bug 33623
Comment 19 Jonathan Druart 2023-04-27 07:13:46 UTC
Additional notes:
* It would be interesting to have a delay between the requests
* We are retrieving the 20 first license when clicking the "Add new license" button and when opening the dropdown list. Seems like there is an extra one, is it hiding something?
* About the scrollbar hitting top when scrolling down, did you have a look at 'more'? https://select2.org/data-sources/ajax#pagination
Comment 20 Jonathan Druart 2023-04-27 07:54:28 UTC
Created attachment 150287 [details] [review]
Bug 32474: Properly call getAll

To encode q parameter correctly, based on bug 33623
Comment 21 Matt Blenkinsop 2023-04-27 14:40:32 UTC
Created attachment 150305 [details] [review]
Bug 32474: Fix duplicate API call

This patch fixes a duplicate API call and improves functionality

Test plan as before
Comment 22 Matt Blenkinsop 2023-04-27 14:42:28 UTC
(In reply to Jonathan Druart from comment #19)
> Additional notes:
> * It would be interesting to have a delay between the requests

I've added a setTimeout for 2 seconds between the requests

> * We are retrieving the 20 first license when clicking the "Add new license"
> button and when opening the dropdown list. Seems like there is an extra one,
> is it hiding something?

This is now fixed, originally I need to pre-fill the data in the component to make the pagination work but I've solved that issue and it now loads the data only when its opened

> * About the scrollbar hitting top when scrolling down, did you have a look
> at 'more'? https://select2.org/data-sources/ajax#pagination

There isn't a similar functionality for v-select, I'm trying a different method using v-autocomplete as a second option. I'll try and finish that before I go on holiday and see if it offers any improvement
Comment 23 Jonathan Druart 2023-04-27 15:07:11 UTC
(In reply to Matt Blenkinsop from comment #22)
> (In reply to Jonathan Druart from comment #19)
> > Additional notes:
> > * It would be interesting to have a delay between the requests
> 
> I've added a setTimeout for 2 seconds between the requests

IIRC we are using 250ms in other places.
Comment 24 Matt Blenkinsop 2023-04-27 15:39:59 UTC
Created attachment 150308 [details] [review]
Bug 32474: Fix duplicate API call

This patch fixes a duplicate API call and fixes the "required" attribute

Test plan as before
Comment 25 Matt Blenkinsop 2023-04-27 15:41:26 UTC
Created attachment 150309 [details] [review]
Bug 32474: Fix duplicate API call

This patch fixes a duplicate API call and fixes the "required" attribute

Test plan as before
Comment 26 Jonathan Druart 2023-05-23 08:45:07 UTC
(In reply to Matt Blenkinsop from comment #22)
> (In reply to Jonathan Druart from comment #19)
> > * About the scrollbar hitting top when scrolling down, did you have a look
> > at 'more'? https://select2.org/data-sources/ajax#pagination
> 
> There isn't a similar functionality for v-select, I'm trying a different
> method using v-autocomplete as a second option. I'll try and finish that
> before I go on holiday and see if it offers any improvement

What about this?
Comment 27 Matt Blenkinsop 2023-05-26 14:06:39 UTC
It didn't make any difference unfortunately, the key functionality is the same as the v-select so the same issues arose
Comment 28 Jonathan Druart 2023-07-06 14:10:03 UTC
Working on this.
Comment 29 Jonathan Druart 2023-07-07 06:14:13 UTC
Created attachment 153110 [details] [review]
Bug 32474: Infinite scroll v-selects

This patch is an example ajax based v-select. The v-select will load the first 20 items and then continue to load paginated sections of 20 items as the user scrolls down. The v-select also offers ajax based searches (unpaginated) and will return to 20 item pagination if the search is cleared.

Currently the pagination just works with an Intersection Observer based on scrolling - the main issue with this is that the size of the v-select window changes every time new data is added to the list and this causes the scrollbar to jump before resetting at the correct size. This can be a bit annoying, especially when scrolling quickly.

The only way round this will either be to paginate using buttons i.e. (previous/next page) or to limit the data to 20 items at all times and re-paginate when scrolling back up - interested to hear thoughts/suggestions on this or whether anyone has a magic CSS fix that solves it ;)

The new v-select is only in one location so far as a test - Agreement Licenses

Test plan:
1) You will need to add multiple licenses in order to see the pagination, attached is a script that will create 100 dummy licenses at a time if you wish to use that
2) Once licenses are created, apply patch and run yarn build
3) Navigate to Agreements and click the New Agreement button
4) Scroll down to the Add new license option and click the button
5) The License select is the InfiniteScrollSelect and should display the licenses you have added
6) Open the dropdown and 20 items will be listed
7) Scroll down and as you scroll, more items will be loaded (this can be seen in the Network tab in developer tools)
8) Enter a search query and the results should reflect the search query
9) Delete the search query and the dropdown should return to the first 20 paginated items and pagination will work again when scrolling
10) Try submitting the form with paginate/searched options and the form should still work as intended
Comment 30 Jonathan Druart 2023-07-07 06:14:15 UTC
Created attachment 153111 [details] [review]
Bug 32474: Do not fetch all the licenses

Otherwise we are loosing all the point of the pagination!
Comment 31 Jonathan Druart 2023-07-07 06:14:18 UTC
Created attachment 153112 [details] [review]
Bug 32474: Properly call getAll

To encode q parameter correctly, based on bug 33623
Comment 32 Jonathan Druart 2023-07-07 06:14:21 UTC
Created attachment 153113 [details] [review]
Bug 32474: Fix duplicate API call

This patch fixes a duplicate API call and fixes the "required" attribute

Test plan as before
Comment 33 Jonathan Druart 2023-07-07 06:16:43 UTC
I rebased the patch and created bug 32474 to move the getAll changes to a separate bug report.

I didn't manage to fix the scrollbar bump, it's quite annoying IMO. I am not sure this is good enough to be pushed. Maybe we should try the example in the guide https://vue-select.org/guide/infinite-scroll.html and see if the problem exists there. If yes, ask them?
Comment 34 Matt Blenkinsop 2023-07-31 14:05:49 UTC
Created attachment 154094 [details] [review]
Bug 32474: TEST ONLY - DO NOT PUSH

This commit adds the example for inifinite scrolling for the vue-select as per the docs to check scroll behaviour
Comment 35 Matt Blenkinsop 2023-07-31 14:07:13 UTC
I added the example from the docs next to the same select in Agreement licenses. I've added 200 items (not AJAX based) and the behaviour still isn't perfect. There's still a bump on the scrollbar, especially on the first few iterations
Comment 36 Matt Blenkinsop 2023-07-31 14:08:12 UTC
Let me know your thoughts, I think this might need to be raised with them
Comment 37 Jonathan Druart 2023-09-29 13:57:48 UTC
(In reply to Matt Blenkinsop from comment #36)
> Let me know your thoughts, I think this might need to be raised with them

Yes, please reach me if you have some time.
Comment 38 Matt Blenkinsop 2023-09-29 15:10:31 UTC
Created attachment 156410 [details] [review]
Bug 32474: Fix scroll bump when new data loads

This patch addresses an annoying scroll bump when new data loads. Previously the scrollbar would jump all the way to the top of the selct before resetting, this has now been stopped
Comment 39 Matt Blenkinsop 2023-09-29 15:13:25 UTC
I think this fixes the scroll bump - have a play with it and let me know what you think

If this behaviour is an improvement then I'll look at rebasing and re-formatting the patches because there has been quite a few versions of this bug now.
Comment 40 Jonathan Druart 2023-10-03 06:51:45 UTC
Matt, thanks, this is working great now! I remember I played with that scrollTop trick, I must have missed the right place to put it!

I think this can go as it now and we will implement it for the other dropdown lists on separate bug reports.
Comment 41 Jonathan Druart 2023-10-03 06:52:29 UTC
Created attachment 156470 [details] [review]
Bug 32474: Infinite scroll v-selects

This patch is an example ajax based v-select. The v-select will load the first 20 items and then continue to load paginated sections of 20 items as the user scrolls down. The v-select also offers ajax based searches (unpaginated) and will return to 20 item pagination if the search is cleared.

Currently the pagination just works with an Intersection Observer based on scrolling - the main issue with this is that the size of the v-select window changes every time new data is added to the list and this causes the scrollbar to jump before resetting at the correct size. This can be a bit annoying, especially when scrolling quickly.

The only way round this will either be to paginate using buttons i.e. (previous/next page) or to limit the data to 20 items at all times and re-paginate when scrolling back up - interested to hear thoughts/suggestions on this or whether anyone has a magic CSS fix that solves it ;)

The new v-select is only in one location so far as a test - Agreement Licenses

Test plan:
1) You will need to add multiple licenses in order to see the pagination, attached is a script that will create 100 dummy licenses at a time if you wish to use that
2) Once licenses are created, apply patch and run yarn build
3) Navigate to Agreements and click the New Agreement button
4) Scroll down to the Add new license option and click the button
5) The License select is the InfiniteScrollSelect and should display the licenses you have added
6) Open the dropdown and 20 items will be listed
7) Scroll down and as you scroll, more items will be loaded (this can be seen in the Network tab in developer tools)
8) Enter a search query and the results should reflect the search query
9) Delete the search query and the dropdown should return to the first 20 paginated items and pagination will work again when scrolling
10) Try submitting the form with paginate/searched options and the form should still work as intended

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 42 Jonathan Druart 2023-10-03 06:52:32 UTC
Created attachment 156471 [details] [review]
Bug 32474: Do not fetch all the licenses

Otherwise we are loosing all the point of the pagination!

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 43 Jonathan Druart 2023-10-03 06:52:35 UTC
Created attachment 156472 [details] [review]
Bug 32474: Properly call getAll

To encode q parameter correctly, based on bug 33623

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 44 Jonathan Druart 2023-10-03 06:52:38 UTC
Created attachment 156473 [details] [review]
Bug 32474: Fix duplicate API call

This patch fixes a duplicate API call and fixes the "required" attribute

Test plan as before

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 45 Jonathan Druart 2023-10-03 06:52:41 UTC
Created attachment 156474 [details] [review]
Bug 32474: Fix scroll bump when new data loads

This patch addresses an annoying scroll bump when new data loads. Previously the scrollbar would jump all the way to the top of the selct before resetting, this has now been stopped

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 46 Martin Renvoize 2023-10-03 07:01:51 UTC
It's great to see this has moved.. are you comfortable for me to QA Jonathan?
Comment 47 Martin Renvoize 2023-10-03 07:14:00 UTC
Created attachment 156475 [details] [review]
Bug 32474: Infinite scroll v-selects

This patch is an example ajax based v-select. The v-select will load the first
20 items and then continue to load paginated sections of 20 items as the user
scrolls down. The v-select also offers ajax based searches (unpaginated) and
will return to 20 item pagination if the search is cleared.

Currently the pagination just works with an Intersection Observer based on
scrolling - the main issue with this is that the size of the v-select window
changes every time new data is added to the list and this causes the scrollbar
to jump before resetting at the correct size. This can be a bit annoying,
especially when scrolling quickly.

The only way round this will either be to paginate using buttons i.e.
(previous/next page) or to limit the data to 20 items at all times and
re-paginate when scrolling back up - interested to hear thoughts/suggestions
on this or whether anyone has a magic CSS fix that solves it ;)

The new v-select is only in one location so far as a test - Agreement Licenses

Test plan:
1) You will need to add multiple licenses in order to see the pagination,
   attached is a script that will create 100 dummy licenses at a time if you
   wish to use that
2) Once licenses are created, apply patch and run yarn build
3) Navigate to Agreements and click the New Agreement button
4) Scroll down to the Add new license option and click the button
5) The License select is the InfiniteScrollSelect and should display the
   licenses you have added
6) Open the dropdown and 20 items will be listed
7) Scroll down and as you scroll, more items will be loaded (this can be seen
   in the Network tab in developer tools)
8) Enter a search query and the results should reflect the search query
9) Delete the search query and the dropdown should return to the first 20
   paginated items and pagination will work again when scrolling
10) Try submitting the form with paginate/searched options and the form should
    still work as intended

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 48 Martin Renvoize 2023-10-03 07:14:03 UTC
Created attachment 156476 [details] [review]
Bug 32474: Do not fetch all the licenses

Otherwise we are loosing all the point of the pagination!

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 49 Martin Renvoize 2023-10-03 07:14:06 UTC
Created attachment 156477 [details] [review]
Bug 32474: Properly call getAll

To encode q parameter correctly, based on bug 33623

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 50 Martin Renvoize 2023-10-03 07:14:09 UTC
Created attachment 156478 [details] [review]
Bug 32474: Fix duplicate API call

This patch fixes a duplicate API call and fixes the "required" attribute

Test plan as before

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 51 Martin Renvoize 2023-10-03 07:14:11 UTC
Created attachment 156479 [details] [review]
Bug 32474: Fix scroll bump when new data loads

This patch addresses an annoying scroll bump when new data loads. Previously the
scrollbar would jump all the way to the top of the selct before resetting, this
has now been stopped.

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 52 Martin Renvoize 2023-10-03 07:15:05 UTC
This is working great, so nice to see that bump gone too.

Code looks solid, tests are passing and happy.. QA scripts happy, No regressions found.

Passing QA
Comment 53 Martin Renvoize 2023-10-03 07:19:36 UTC
Oop.. forgot to run the Cypress tests in my eaferness.. running those before switching state.
Comment 54 Jonathan Druart 2023-10-03 07:58:47 UTC
Created attachment 156481 [details] [review]
Bug 32474: Fix required
Comment 55 Jonathan Druart 2023-10-03 07:59:42 UTC
Created attachment 156482 [details] [review]
Bug 32474: Adjust tests - X-Total-Count
Comment 56 Jonathan Druart 2023-10-03 08:28:45 UTC
Created attachment 156483 [details] [review]
Bug 32474: Pass label and identifier

This is a try to fix the last remaining Cypress failure.
The problem is that the label of the existing license does not display,
only its id.
To recreate:
Create a license
Create an agreement and select the license
Edit the agreement
=> The display shows "License: {id}", not its name

This patch is removing the code from created() because I thought it was
the problem originally, and it didn't seem correct to let
InfiniteScrollSelect deal with the "id" and "label" for the different
dataType. But the problem is somewhere else: we have not fetched any
licenses yet from the AgreementLicenses. However we do have the selected
license that we could pass to InfiniteScrollSelect, but that's yet
another param to pass. It feels like there is something better to do
here.
Comment 57 Jonathan Druart 2023-10-03 08:31:25 UTC
There is also something else: we are passing "v-model" but InfiniteScrollSelect is expecting "modelValue".
Comment 58 Jonathan Druart 2023-10-03 08:36:28 UTC
To summary the last changes:
* The "required" was no longer working - It was not possible to save the form
* Cypress tests were failing because we didn't mock correctly the response (X-Total-Count header was missing)
* "Pass label and identifier" patch can be dropped if you disagree with it, but I think it's the correct way to fix the last remaining cypress failure (which is about the display of the license's name when we edit an agreement)
* Something is wrong with "v-model" vs "modelValue", see previous comment.

Handing it back to Matt.
Comment 59 Matt Blenkinsop 2023-10-03 10:58:54 UTC
Passing the data to the component from the parent causes issues because we can't guarantee that there is a match for the "label" property in that data object. For example, in the case of agreement licenses, if we pass the agreement license to the select component it doesn't have a "name" property which is used as the label. The "name" property exists in the license which appears to be embedded in that object. We'd need to iterate through all the properties to determine if any of them were embedded objects which might contain the "name" property and we could have a scenario where there are agreements and licenses embedded in the same object and both have the "name" property. This could be very inconsistent and difficult to maintain. To do it we would have to explicitly pass the actual name of the license itself as a prop e.g.

:dataToEditLabel="agreement_license.license.name"

This is the cleanest method in terms of code but involves passing another parameter each time

The only other real option I can think of atm is to fetch it from the API when the component is rendered and add it to the options for the select. This means another API request but this is probably more reliable than passing the data from the parent and will be far easier to maintain when Vue gets used in other parts of Koha.

Let me know your thoughts
Comment 60 Jonathan Druart 2023-10-03 14:32:22 UTC
Created attachment 156504 [details] [review]
Bug 32474: Adjust tests

We need to use the same data, for instance we had "license name" and
"first license name" for the license with license_id=1
Comment 61 Jonathan Druart 2023-10-03 14:32:25 UTC
Created attachment 156505 [details] [review]
Bug 32474: Pass label and identifier
Comment 62 Jonathan Druart 2023-10-03 14:32:48 UTC
This is not very nice, but the tests now pass and it's flexible enough for now IMO.
Comment 63 Matt Blenkinsop 2023-11-29 11:29:37 UTC
Signing off Joubu's patches
Comment 64 Matt Blenkinsop 2023-11-29 11:30:01 UTC
Created attachment 159327 [details] [review]
Bug 32474: Fix required

Signed-off-by: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>
Comment 65 Matt Blenkinsop 2023-11-29 11:30:04 UTC
Created attachment 159328 [details] [review]
Bug 32474: Adjust tests - X-Total-Count

Signed-off-by: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>
Comment 66 Matt Blenkinsop 2023-11-29 11:30:07 UTC
Created attachment 159329 [details] [review]
Bug 32474: Adjust tests

We need to use the same data, for instance we had "license name" and
"first license name" for the license with license_id=1

Signed-off-by: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>
Comment 67 Matt Blenkinsop 2023-11-29 11:30:10 UTC
Created attachment 159330 [details] [review]
Bug 32474: Pass label and identifier

Signed-off-by: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>
Comment 68 Jonathan Druart 2023-11-29 13:05:16 UTC
Found a bug.

I have 500 licenses:

use t::lib::TestBuilder;
my $b = t::lib::TestBuilder->new;
for ( 1 .. 500 ) {
    say $_;
    $b->build_object({ class => 'Koha::ERM::Licenses', value => {name => "License $_"}});
}

Add a new agreement form: /cgi-bin/koha/erm/agreements/add

In the license dropdown, search "license 1"
Select "License 117"

Selected text shows "License 117"
click again the dropdown
=> greyed "117" (the id)

click outside the dropdown
=> Selected text show "117"
Comment 69 Matt Blenkinsop 2023-11-29 14:56:42 UTC
Created attachment 159340 [details] [review]
Bug 32474: Fix persistence of selections when pagination re-triggers

Currently when the select is closed and then re-opens, the pagination is re-triggered which removes the data that the lable is being pulled from for the select. This patch addresses this by keeping the currently selected piece of data and adding it into the re-paginated array of data.
Comment 70 Jonathan Druart 2023-11-29 15:19:00 UTC
Still having kind of the same problem.

Select "License 3", save
Edit
Click in then click out
=> "3"
Comment 71 Matt Blenkinsop 2023-11-29 15:59:54 UTC
Created attachment 159343 [details] [review]
Bug 32474: Fix persistence of selections when pagination re-triggers

Currently when the select is closed and then re-opens, the pagination is re-triggered which removes the data that the lable is being pulled from for the select. This patch addresses this by keeping the currently selected piece of data and adding it into the re-paginated array of data.
Comment 72 Jonathan Druart 2023-11-30 09:36:13 UTC
Created attachment 159386 [details] [review]
Bug 32474: Store the selected option label

It prevents the label to be removed when the selected option is not
longer in the item list.
Comment 73 Jonathan Druart 2023-11-30 09:36:57 UTC
This last patch is an alternative patch of "Bug 32474: Fix persistence of selections when pagination re-triggers"
Comment 74 Matt Blenkinsop 2023-11-30 11:29:11 UTC
Created attachment 159389 [details] [review]
Bug 32474: Add cypress tests
Comment 75 Matt Blenkinsop 2023-11-30 12:35:09 UTC
Created attachment 159395 [details] [review]
Bug 32474: Store the selected option label

It prevents the label to be removed when the selected option is not
longer in the item list.

Signed-off-by: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>
Comment 76 Jonathan Druart 2023-11-30 13:02:24 UTC
Created attachment 159397 [details] [review]
Bug 32474: Infinite scroll v-selects

This patch is an example ajax based v-select. The v-select will load the first
20 items and then continue to load paginated sections of 20 items as the user
scrolls down. The v-select also offers ajax based searches (unpaginated) and
will return to 20 item pagination if the search is cleared.

Currently the pagination just works with an Intersection Observer based on
scrolling - the main issue with this is that the size of the v-select window
changes every time new data is added to the list and this causes the scrollbar
to jump before resetting at the correct size. This can be a bit annoying,
especially when scrolling quickly.

The only way round this will either be to paginate using buttons i.e.
(previous/next page) or to limit the data to 20 items at all times and
re-paginate when scrolling back up - interested to hear thoughts/suggestions
on this or whether anyone has a magic CSS fix that solves it ;)

The new v-select is only in one location so far as a test - Agreement Licenses

Test plan:
1) You will need to add multiple licenses in order to see the pagination,
   attached is a script that will create 100 dummy licenses at a time if you
   wish to use that
2) Once licenses are created, apply patch and run yarn build
3) Navigate to Agreements and click the New Agreement button
4) Scroll down to the Add new license option and click the button
5) The License select is the InfiniteScrollSelect and should display the
   licenses you have added
6) Open the dropdown and 20 items will be listed
7) Scroll down and as you scroll, more items will be loaded (this can be seen
   in the Network tab in developer tools)
8) Enter a search query and the results should reflect the search query
9) Delete the search query and the dropdown should return to the first 20
   paginated items and pagination will work again when scrolling
10) Try submitting the form with paginate/searched options and the form should
    still work as intended

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 77 Jonathan Druart 2023-11-30 13:02:28 UTC
Created attachment 159398 [details] [review]
Bug 32474: Do not fetch all the licenses

Otherwise we are loosing all the point of the pagination!

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 78 Jonathan Druart 2023-11-30 13:02:31 UTC
Created attachment 159399 [details] [review]
Bug 32474: Properly call getAll

To encode q parameter correctly, based on bug 33623

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 79 Jonathan Druart 2023-11-30 13:02:34 UTC
Created attachment 159400 [details] [review]
Bug 32474: Fix duplicate API call

This patch fixes a duplicate API call and fixes the "required" attribute

Test plan as before

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 80 Jonathan Druart 2023-11-30 13:02:38 UTC
Created attachment 159401 [details] [review]
Bug 32474: Fix scroll bump when new data loads

This patch addresses an annoying scroll bump when new data loads. Previously the
scrollbar would jump all the way to the top of the selct before resetting, this
has now been stopped.

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 81 Jonathan Druart 2023-11-30 13:02:41 UTC
Created attachment 159402 [details] [review]
Bug 32474: Fix required

Signed-off-by: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 82 Jonathan Druart 2023-11-30 13:02:44 UTC
Created attachment 159403 [details] [review]
Bug 32474: Adjust tests - X-Total-Count

Signed-off-by: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 83 Jonathan Druart 2023-11-30 13:02:47 UTC
Created attachment 159404 [details] [review]
Bug 32474: Adjust tests

We need to use the same data, for instance we had "license name" and
"first license name" for the license with license_id=1

Signed-off-by: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 84 Jonathan Druart 2023-11-30 13:02:50 UTC
Created attachment 159405 [details] [review]
Bug 32474: Pass label and identifier

Signed-off-by: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 85 Jonathan Druart 2023-11-30 13:02:53 UTC
Created attachment 159406 [details] [review]
Bug 32474: Add cypress tests

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 86 Jonathan Druart 2023-11-30 13:02:57 UTC
Created attachment 159407 [details] [review]
Bug 32474: Store the selected option label

It prevents the label to be removed when the selected option is not
longer in the item list.

Signed-off-by: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 87 Katrin Fischer 2024-01-30 16:50:04 UTC
Pushed for 24.05!

Well done everyone, thank you!
Comment 88 Fridolin Somers 2024-02-01 16:31:30 UTC
Enhancement not pushed to 23.11.x
Comment 89 Katrin Fischer 2024-02-02 10:06:36 UTC
Tests were green when I ran them locally. so maybe something has changed, can you please check on this fail?

https://jenkins.koha-community.org/job/Koha_Master/lastCompletedBuild/testReport/(root)/Should%20load%20the%20next%20page%20on%20scroll/Infinite_scroll_Should_load_the_next_page_on_scroll/

koha_1       |   Running:  InfiniteScrollSelect_spec.ts                                                   (1 of 13)
koha_1       | <?xml version="1.0" encoding="UTF-8"?>
koha_1       | <testsuites name="Mocha Tests" time="27.603" tests="4" failures="1">
koha_1       |   <testsuite name="Root Suite" timestamp="2024-02-02T09:46:14" tests="0" file="t/cypress/integration/InfiniteScrollSelect_spec.ts" time="0.000" failures="0">
koha_1       |   </testsuite>
koha_1       |   <testsuite name="Infinite scroll" timestamp="2024-02-02T09:46:14" tests="4" time="27.592" failures="1">
koha_1       |     <testcase name="Infinite scroll Should load the next page on scroll" time="0.000" classname="Should load the next page on scroll">
koha_1       |       <failure message="Timed out retrying after 10000ms: Not enough elements found. Found &apos;20&apos;, expected &apos;40&apos;." type="AssertionError"><![CDATA[AssertionError: Timed out retrying after 10000ms: Not enough elements found. Found '20', expected '40'.
koha_1       |     at Context.eval (webpack://koha/./t/cypress/integration/InfiniteScrollSelect_spec.ts:90:27)
koha_1       | 
koha_1       |       + expected - actual
koha_1       | 
koha_1       |       -20
koha_1       |       +40
koha_1       |       ]]></failure>
koha_1       |     </testcase>
koha_1       |     <testcase name="Infinite scroll Should correctly submit the form" time="4.166" classname="Should correctly submit the form">
koha_1       |     </testcase>
koha_1       |     <testcase name="Infinite scroll Should correctly display labels" time="5.000" classname="Should correctly display labels">
koha_1       |     </testcase>
koha_1       |     <testcase name="Infinite scroll Should correctly display the label when editing" time="3.848" classname="Should correctly display the label when editing">
koha_1       |     </testcase>
koha_1       |   </testsuite>
koha_1       | </testsuites>
Comment 90 Matt Blenkinsop 2024-02-02 10:28:04 UTC
Passes locally for me too but I think telling cypress to wait for the intercepted requests for pages two and three may help. I'll add a follow-up patch
Comment 91 Matt Blenkinsop 2024-02-02 10:30:14 UTC
Created attachment 161724 [details] [review]
Bug 32474: (follow-up): Tell the tests to wait for the intercepted request responses
Comment 92 Katrin Fischer 2024-02-02 12:37:39 UTC
Thanks Matt, follow-up pushed - now we need to wait and see :)
Comment 93 Fridolin Somers 2024-02-13 10:36:47 UTC
Enhancement not pushed to 23.11.x