Pickers: Split browse and search into tabs

[madsrasmussen]

Description

The tree item picker, collection item picker, and document link picker modals stacked the search field on
top of the browsing UI and used an implicit "search mode": as soon as a query existed, the tree or
collection was hidden.

Browsing and searching are now two explicit tabs in the top-right of the modal header, matching how
workspace views (e.g. block workspaces) present their tabs:

• Browse — the Tree or the Collection plus the breadcrumb where there is one.
• Search — the search field and its results.

List Data

Browse

Search

Tree Data

Document Link Picker Modal

[claude]

Claude finished @madsrasmussen's task in 6m 5s —— View job

---

PR Review

Target: origin/v17/dev · Based on commit: 392e7769 · Skipped: 1 noise file (non-en.ts lang) out of 12 total

Replaces the implicit "query hides the tree/collection" search mode in three picker modals (tree, collection, document-link) with explicit Browse/Search tabs rendered in the umb-body-layout navigation slot. Tabs only appear when a search provider is configured; pickers without search are unchanged.

• Modified public API: UmbPickerSearchFieldElement — new focus() override

---

Important

• src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/duplicate/modal/duplicate-document-modal.element.ts:124 and src/Umbraco.Web.UI.Client/src/packages/members/member/components/member-picker-modal/member-picker-modal.element.ts:104: Both pickers still observe search.query and hide their tree when a query is present (if (this._searchQuery) return nothing). After this PR, users opening a tree picker or collection picker see the new tab UI, but opening the duplicate-to or member picker gets the old behaviour. If this is a phased migration, a follow-up issue/label would help track it. Fix this →

Suggestions

• src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts:445 and document-link-picker-modal.element.ts:191: #renderSearch() doesn't guard on _isSearchable, so <umb-picker-search-field> and <umb-picker-search-result> are always mounted in the hidden search <div> even when no search is configured. The elements render nothing themselves, so there is no visible impact, but collection-item-picker-modal.element.ts:165 already guards consistently (if (!this._isSearchable) return nothing). Aligning the other two avoids unnecessary context subscriptions.

• src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-field.element.ts:38: The new public focus() override — which forwards to the inner uui-input — has no dedicated test. The tab tests exercise the code path but don't assert that focus actually landed in the input. A minimal test like clickTab('search'); await element.updateComplete; expect(document.activeElement).to.equal(...) would give direct coverage of this exported method.

---

Approved with Suggestions for improvement

Good to go, but please carefully consider the importance of the suggestions. The core implementation is clean — the ?hidden approach correctly keeps the tree/collection mounted when switching tabs (preserving scroll and expansion state), the tests cover the key tab-switching and selection-retention scenarios, and the data-mark targeting convention is consistent with the rest of the codebase.

---

Labels applied: area/frontend, category/localization, category/ux, category/ui

[Copilot]

Pull request overview

This PR updates picker modals in the backoffice client to make Browse and Search explicit, user-selectable tabs (instead of implicitly switching into “search mode” when a query exists), aligning picker UX with existing workspace tab patterns.

Changes:

• Introduces Browse/Search tab UI in the tree picker, collection item picker, and document link picker modals, including focusing the search input when switching to the Search tab.
• Adds/updates web-component tests to cover tab rendering, pane visibility, and “keep browse UI mounted” behavior; adds a shared test utility to ignore ResizeObserver loop errors in the runner.
• Adds new localization keys for the tab labels and an example picker data source that supports search without text filtering.

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/Umbraco.Web.UI.Client/utils/test-utils.ts	Adds a helper to temporarily swallow ResizeObserver loop errors during tests.
src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/document-link-picker-modal/document-link-picker-modal.element.ts	Adds Browse/Search tabs and pane switching for the document link picker modal.
src/Umbraco.Web.UI.Client/src/packages/multi-url-picker/document-link-picker-modal/document-link-picker-modal.element.test.ts	Adds tab behavior tests and installs the ResizeObserver error swallow helper.
src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.ts	Adds Browse/Search tabs and pane switching for the tree picker modal.
src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker-modal/tree-picker-modal.element.test.ts	New tests for tab presence/behavior and selection persistence across tabs.
src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-field.element.ts	Adds internal input querying and forwards focus() to the underlying uui-input.
src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-item-picker-modal/collection-item-picker-modal.element.ts	Adds Browse/Search tabs and refactors layout/styling to use pane switching.
src/Umbraco.Web.UI.Client/src/packages/core/collection/collection-item-picker-modal/collection-item-picker-modal.element.test.ts	New tests for tab presence/behavior and selection persistence across tabs.
src/Umbraco.Web.UI.Client/src/assets/lang/en.ts	Adds picker.browseTab and picker.searchTab localization strings.
src/Umbraco.Web.UI.Client/examples/picker-data-source/index.ts	Registers the new “custom collection with search” example manifests.
src/Umbraco.Web.UI.Client/examples/picker-data-source/custom-collection-with-search/manifests.ts	Adds a new example data source manifest demonstrating search support.
src/Umbraco.Web.UI.Client/examples/picker-data-source/custom-collection-with-search/example-custom-with-search-picker-collection-data-source.ts	Implements the example data source with collection + search APIs.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[nielslyngsoe]

Yes, great

[sonarqubecloud]

Quality Gate failed

Failed conditions
12.7% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud