Tree Item Picker: Make table rows and cards with children navigable in pickers during selection

[madsrasmussen]

Adjusts selection behavior so items with children remain navigable while selection is active. The table now distinguishes selection-mode from select-only and supports per-row selectOnly overrides, letting tree rows opt out when needed. Tree table mapping and default tree item cards now explicitly prevent select-only on child items, and new/updated tests cover these selection-mode edge cases.

How to test

Currently, only the Document Type Picker has tree views enabled. You will see one when creating a new package in the package section.

Make sure that your Document Types are organized into folders so the picker has something to navigate.

Ensure that it is possible to navigate into an item from all views (tree, table, cards) when a selection is in progress.

[claude]

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

---

PR Review

Target: origin/v17/dev · Based on commit: 53699d8c · Skipped: 1 file out of 6 total (build/azure-pipelines.yml — CI config)

Separates visual selection state (selection-mode) from lock-row-to-select behavior (select-only) in the table element, and adds a per-row selectOnly override so tree rows with children can opt out. The default tree item card applies the same guard, and both changes are covered by new tests.

• Modified public API: UmbTableItem (exported via @umbraco-cms/backoffice/components) — new optional selectOnly?: boolean property added

---

Suggestions

• src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.test.ts:111: The "turns every row into select-only" test asserts the select-only attribute but skips selection-mode. Since the checkbox/icon swap now runs off [selection-mode] in CSS (not [select-only]), missing this assertion leaves the visual contract untested. A one-liner expect(getRow('1').hasAttribute('selection-mode')).to.be.true in the same block would close that gap.

• src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts:436: item.selectOnly ?? selectionMode allows a row to be forced select-only even when the table is not in selection mode (i.e. item.selectOnly = true, selectionMode = false). No current callers do this, but the JSDoc only documents the false direction ("Set to false to keep the row content interactive"). Consider clarifying whether true is a supported opt-in, or narrowing the type to false | undefined to make the only valid override explicit.

---

Approved with Suggestions for improvement

Good to go, but please carefully consider the importance of the suggestions.

[Copilot]

Pull request overview

This PR adjusts picker selection behavior so tree items with children remain navigable while selection is active, by separating “selection mode” (show selection affordances) from “select-only” (disable row/card interaction) and allowing per-row overrides.

Changes:

• Add per-row selectOnly override on UmbTableItem and introduce selection-mode vs select-only on table rows.
• Ensure tree table rows and default tree item cards never become select-only when the item has children, preserving drill-in navigation.
• Add/extend component tests to cover the new selection-mode/select-only edge cases.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/Umbraco.Web.UI.Client/src/packages/core/tree/view/table/table-tree-view.element.ts	Maps tree items to table rows and opts items with children out of select-only.
src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item-card/default/default-tree-item-card.element.ts	Prevents select-only on cards with children while selection is active.
src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item-card/default/default-tree-item-card.element.test.ts	New tests for tree item card select-only behavior (needs a small fix to the test double API).
src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.ts	Introduces selection-mode attribute and per-row selectOnly override, keeping checkbox UI in selection mode while allowing interaction when opted out.
src/Umbraco.Web.UI.Client/src/packages/core/components/table/table.element.test.ts	Adds tests verifying row-level opt-out from select-only while remaining in selection mode.

[AndyButland]

Looks good and works as expected @madsrasmussen. I can see the problem where selecting an item would previously block navigating down into the children via the table and card views. With this PR in place that's no longer a concern. I can select from various levels in the tree and all works as expected.

Approving with a couple of minor comments for you to consider before merging.

[sonarqubecloud]

Quality Gate passed

Issues
7 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud