From 3face07715ab2fa59cbb75171da8014e0a75f5a6 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Tue, 13 Aug 2024 14:39:02 +0200
Subject: [PATCH] only render clear button if there is a search query

---
 .../tree/tree-picker/tree-picker-modal.element.ts    | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

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 d5757531a2..edd16dae04 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
@@ -213,11 +213,13 @@ export class UmbTreePickerModalElement<TreeItemType extends UmbTreeItemModelBase
 						: html`<uui-icon name="search"></uui-icon>`}
 				</div>
 
-				<div slot="append">
-					<uui-button type="button" @click=${this.#onSearchClear} compact>
-						<uui-icon name="icon-delete"></uui-icon>
-					</uui-button>
-				</div>
+				${this._searchQuery
+					? html`
+							<uui-button slot="append" type="button" @click=${this.#onSearchClear} compact>
+								<uui-icon name="icon-delete" @click=${this.#onSearchClear}></uui-icon>
+							</uui-button>
+						`
+					: nothing}
 			</uui-input>
 			<div id="search-divider"></div>
 			${this.#renderSearchResult()}