From c0949bf6dd86cd66064381eaecbdcf24f9c6cfac Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Thu, 15 Aug 2024 19:28:03 +0200
Subject: [PATCH] hide picker when searching

---
 .../tree-picker/tree-picker-modal.element.ts  | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts
index 377fc386fc..403611cce7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/tree/tree-picker/tree-picker-modal.element.ts
@@ -26,6 +26,9 @@ export class UmbTreePickerModalElement<TreeItemType extends UmbTreeItemModelBase
 	@state()
 	_createLabel?: string;
 
+	@state()
+	_searchQuery?: string;
+
 	// TODO: find a way to implement through the manifest api field
 	#api = new UmbTreePickerModalContext(this);
 
@@ -33,6 +36,7 @@ export class UmbTreePickerModalElement<TreeItemType extends UmbTreeItemModelBase
 		super();
 		this.#api.selection.setSelectable(true);
 		this.#observePickerSelection();
+		this.#observeSearch();
 	}
 
 	override connectedCallback(): void {
@@ -71,7 +75,17 @@ export class UmbTreePickerModalElement<TreeItemType extends UmbTreeItemModelBase
 				this.updateValue({ selection });
 				this.requestUpdate();
 			},
-			'umbSelectionObserver',
+			'umbPickerSelectionObserver',
+		);
+	}
+
+	#observeSearch() {
+		this.observe(
+			this.#api.search.query,
+			(query) => {
+				this._searchQuery = query?.query;
+			},
+			'umbPickerSearchQueryObserver',
 		);
 	}
 
@@ -139,6 +153,10 @@ export class UmbTreePickerModalElement<TreeItemType extends UmbTreeItemModelBase
 	}
 
 	#renderTree() {
+		if (this._searchQuery) {
+			return nothing;
+		}
+
 		return html`
 			<umb-tree
 				alias=${ifDefined(this.data?.treeAlias)}