prevent opening tree items in a selectable context, as well disable them if they are not selectable.

src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item-base/tree-item-base.context.ts

@@ -42,6 +42,9 @@ export class UmbTreeItemContextBase<TreeItemType extends TreeItemPresentationMod
 	#isSelectable = new UmbBooleanState(false);
 	isSelectable = this.#isSelectable.asObservable();
 
+	#isSelectableContext = new UmbBooleanState(false);
+	isSelectableContext = this.#isSelectableContext.asObservable();
+
 	#isSelected = new UmbBooleanState(false);
 	isSelected = this.#isSelected.asObservable();
 
@@ -138,6 +141,8 @@ export class UmbTreeItemContextBase<TreeItemType extends TreeItemPresentationMod
 	#observeIsSelectable() {
 		if (!this.treeContext) return;
 		new UmbObserverController(this.host, this.treeContext.selectable, (value) => {
+			this.#isSelectableContext.next(value);
+
 			// If the tree is selectable, check if this item is selectable
 			if (value === true) {
 				const isSelectable = this.treeContext?.selectableFilter?.(this.getTreeItem()!) ?? true;

src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item-base/tree-item-base.element.ts

@@ -1,6 +1,6 @@
 import type { UmbTreeItemContext } from '../tree-item/index.js';
 import { UMB_TREE_ITEM_CONTEXT_TOKEN } from './tree-item-base.context.js';
-import { css, html, nothing , customElement, state , ifDefined , repeat } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, nothing, customElement, state, ifDefined, repeat } from '@umbraco-cms/backoffice/external/lit';
 import { UUITextStyles } from '@umbraco-cms/backoffice/external/uui';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 import { TreeItemPresentationModel } from '@umbraco-cms/backoffice/backend-api';
@@ -19,6 +19,9 @@ export class UmbTreeItemBaseElement extends UmbLitElement {
 	@state()
 	private _isLoading = false;
 
+	@state()
+	private _isSelectableContext = false;
+
 	@state()
 	private _isSelectable = false;
 
@@ -43,6 +46,7 @@ export class UmbTreeItemBaseElement extends UmbLitElement {
 			this.observe(this.#treeItemContext.treeItem, (value) => (this._item = value));
 			this.observe(this.#treeItemContext.hasChildren, (value) => (this._hasChildren = value));
 			this.observe(this.#treeItemContext.isLoading, (value) => (this._isLoading = value));
+			this.observe(this.#treeItemContext.isSelectableContext, (value) => (this._isSelectableContext = value));
 			this.observe(this.#treeItemContext.isSelectable, (value) => (this._isSelectable = value));
 			this.observe(this.#treeItemContext.isSelected, (value) => (this._isSelected = value));
 			this.observe(this.#treeItemContext.path, (value) => (this._href = value));
@@ -80,18 +84,21 @@ export class UmbTreeItemBaseElement extends UmbLitElement {
 		this.#treeItemContext?.toggleContextMenu();
 	}
 
+	// Note: Currently we want to prevent opening when the item is in a selectable context, but this might change in the future.
+	// If we like to be able to open items in selectable context, then we might want to make it as a menu item action, so you have to click ... and chose an action called 'Edit'
 	render() {
 		return html`
 			<uui-menu-item
 				@show-children=${this._onShowChildren}
 				@selected=${this._handleSelectedItem}
 				@deselected=${this._handleDeselectedItem}
+				?disabled=${this._isSelectableContext && !this._isSelectable}
 				?selectable=${this._isSelectable}
 				?selected=${this._isSelected}
 				.loading=${this._isLoading}
 				.hasChildren=${this._hasChildren}
 				label="${ifDefined(this._item?.name)}"
-				href="${ifDefined(this._href)}">
+				href="${ifDefined(this._isSelectableContext ? undefined : this._href)}">
 				${this.#renderIcon()} ${this.#renderLabel()} ${this.#renderActions()} ${this.#renderChildItems()}
 				<slot></slot>
 			</uui-menu-item>

src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-item/tree-item.context.interface.ts

@@ -10,6 +10,7 @@ export interface UmbTreeItemContext<TreeItemType extends TreeItemPresentationMod
 	treeItem: Observable<TreeItemType | undefined>;
 	hasChildren: Observable<boolean>;
 	isLoading: Observable<boolean>;
+	isSelectableContext: Observable<boolean>;
 	isSelectable: Observable<boolean>;
 	isSelected: Observable<boolean>;
 	isActive: Observable<boolean>;

src/Umbraco.Web.UI.Client/src/packages/documents/documents/menu-item/document-menu-item.element.ts

@@ -1,4 +1,4 @@
-import { html , customElement } from '@umbraco-cms/backoffice/external/lit';
+import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
 
 @customElement('umb-document-menu-item')