Picker: Add pagination to search results#21593
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds offset-based pagination support to picker search, wiring it through the shared search types, picker search manager, UI, and the various server-side search data sources.
Changes:
- Extend
UmbSearchRequestArgswith apagingmodel and updateUmbPickerSearchManagerto use anUmbPaginationManager(default page size 100) and forwardskip/taketo search providers. - Update the picker search result element to observe pagination state, render a
uui-paginationcontrol, and trigger re-search on page changes, hiding pagination when all items fit on one page. - Update all relevant server search data sources and example picker data sources to accept paging args and forward them (via
skip/take) to backend services or in-memory collections.
Reviewed changes
Copilot reviewed 13 out of 13 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/Umbraco.Web.UI.Client/src/packages/core/search/types.ts | Adds an optional paging: UmbOffsetPaginationRequestModel to UmbSearchRequestArgs so all search providers can support offset pagination. |
| src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-search.manager.ts | Introduces UmbPaginationManager for picker searches, clears it on clear(), and passes skip/take into provider search calls. |
| src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts | Extends the picker search result UI to observe pagination state, render uui-pagination, and re-trigger searches when the current page changes. |
| src/Umbraco.Web.UI.Client/src/packages/templating/templates/search/template-search.server.data-source.ts | Forwards args.paging?.skip/take into TemplateService.getItemTemplateSearch query. |
| src/Umbraco.Web.UI.Client/src/packages/members/member/search/member-search.server.data-source.ts | Forwards args.paging?.skip/take into member search queries alongside existing filters. |
| src/Umbraco.Web.UI.Client/src/packages/members/member-type/search/member-type-search.server.data-source.ts | Adds skip/take from args.paging to member type search queries. |
| src/Umbraco.Web.UI.Client/src/packages/media/media/search/media-search.server.data-source.ts | Extends media search server calls to include paging (skip/take) along with existing filters. |
| src/Umbraco.Web.UI.Client/src/packages/media/media-types/search/media-type-search.server.data-source.ts | Adds paging parameters to media type search backend calls. |
| src/Umbraco.Web.UI.Client/src/packages/documents/documents/search/document-search.server.data-source.ts | Forwards picker search paging info to the document search backend call. |
| src/Umbraco.Web.UI.Client/src/packages/documents/document-types/search/document-type-search.server.data-source.ts | Adds paging info to document type search (skip/take alongside query and isElement). |
| src/Umbraco.Web.UI.Client/src/packages/dictionary/search/dictionary-search.server.data-source.ts | Wires args.paging into dictionary search (filter + skip/take). |
| src/Umbraco.Web.UI.Client/src/packages/data-type/search/data-type-search.server.data-source.ts | Forwards paging parameters to data type search backend calls. |
| src/Umbraco.Web.UI.Client/examples/picker-data-source/example-custom-picker-collection-data-source.ts | Updates the example custom picker data source to implement skip/take-based pagination for both collection browsing and search, and expands the in-memory dataset. |
src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-search.manager.ts
Show resolved
Hide resolved
src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts
Show resolved
Hide resolved
|
@madsrasmussen does this also consider Icon Picker search, which currently doesn't seem to be a paged result. With more icons registered from defaults I am seeing a bit slow performance in icon picker, especially on a laptop with less hardware. |
AndyButland
left a comment
There was a problem hiding this comment.
I've tested this out @madsrasmussen on the document picker, temporarily setting a smaller page size in UmbPickerSearchManager to facilitate testing.
It looks to function correctly, but the two points raised by Copilot here look to be valid to me and need fixing.
I'm also seeing the paging update to be a bit "glitchy" which you can see in this short video:
https://github.com/user-attachments/assets/45f72d6a-138d-4fdd-8cfc-39f41e22e189
src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts
Show resolved
Hide resolved
src/Umbraco.Web.UI.Client/src/packages/core/picker/search/manager/picker-search.manager.ts
Show resolved
Hide resolved
…er-search-result.element.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…ng when entering in the search field
|
@AndyButland Thanks for testing. I have pushed a couple of fixes to address the various things you have found. I have fixed as much of the glitching as possible at the moment. We have an issue in the extension slot element that briefly renders the fallback element, which we should investigate in a different PR. Can I get you to do a rerun to check if I got all your findings? |
|
@bjarnef Unfortunately, this is not affecting the icon picker. Currently, the Icon Picker is a custom implementation of a Picker and does not reuse the same components as many of the other Pickers. We will have to address this separately for the Icon Picker or look into refactoring it to build on the same foundation. |
AndyButland
left a comment
There was a problem hiding this comment.
@madsrasmussen I've retested, and the two issues around the pagination and resetting to page 1 after changing the search query are now resolved.
I do still see the glitching - it seems to me that current page refreshes once before the request to get the new page, and then that replaces it. But if you think that's a more general issue best tackled in a separate PR. that's fine.
|
@AndyButland Yes, the glitch/jumping is still there when you change the page. It happens when we load new items into the list; the extension slot briefly shows the fallback element before it finds the correct extension and renders it. We will leave that fix out of this PR because it is a problem we see across the system in the extension slot, so I think we need to investigate and fix it separately. |
This PR adds pagination support to picker search results, allowing users to navigate through large result sets when searching within pickers.
Changes
Core Search Infrastructure
pagingproperty toUmbSearchRequestArgstype to support skip/take paginationPickerSearchManagerto includeUmbPaginationManagerwith a default page size of 100UI
Search Repositories
Updated the following repositories to forward pagination parameters: