Skip to content

Picker: Add pagination to search results#21593

Merged
madsrasmussen merged 17 commits intomainfrom
v17/bugfix/picker-search-result-pagination
Feb 4, 2026
Merged

Picker: Add pagination to search results#21593
madsrasmussen merged 17 commits intomainfrom
v17/bugfix/picker-search-result-pagination

Conversation

@madsrasmussen
Copy link
Contributor

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

  • Added paging property to UmbSearchRequestArgs type to support skip/take pagination
  • Updated PickerSearchManager to include UmbPaginationManager with a default page size of 100
  • Modified search method to pass pagination parameters to search providers

UI

  • Added pagination controls to the picker search results element
  • Pagination is automatically hidden when all items fit on a single page

Search Repositories
Updated the following repositories to forward pagination parameters:

  • Document search
  • Media search
  • Member search
  • Data type search
  • Document type search
  • Media type search
  • Member type search
  • Dictionary search
  • Template search

Copilot AI review requested due to automatic review settings February 1, 2026 20:01
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 UmbSearchRequestArgs with a paging model and update UmbPickerSearchManager to use an UmbPaginationManager (default page size 100) and forward skip/take to search providers.
  • Update the picker search result element to observe pagination state, render a uui-pagination control, 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.

@bjarnef
Copy link
Contributor

bjarnef commented Feb 1, 2026

@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.

Copy link
Contributor

@AndyButland AndyButland left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@madsrasmussen
Copy link
Contributor Author

@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?

@madsrasmussen
Copy link
Contributor Author

@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.

Copy link
Contributor

@AndyButland AndyButland left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.

@madsrasmussen
Copy link
Contributor Author

@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.

@madsrasmussen madsrasmussen merged commit 9b99d36 into main Feb 4, 2026
27 of 28 checks passed
@madsrasmussen madsrasmussen deleted the v17/bugfix/picker-search-result-pagination branch February 4, 2026 09:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants