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()}