From c5a43aef91af1043ad96c6e94b28f81e9b341aea Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Fri, 16 Aug 2024 12:28:12 +0200
Subject: [PATCH] only render search if search is enabled

---
 .../search/picker-search-result.element.ts    | 23 ++++++++-----------
 .../picker/search/picker-search.element.ts    | 16 ++++++-------
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts
index 2d7881da43..2b71d884f6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search-result.element.ts
@@ -1,6 +1,6 @@
 import { UMB_PICKER_CONTEXT } from '../picker.context.token.js';
 import type { UmbPickerContext } from '../picker.context.js';
-import { customElement, html, repeat, state } from '@umbraco-cms/backoffice/external/lit';
+import { customElement, html, nothing, repeat, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UmbSearchRequestArgs } from '@umbraco-cms/backoffice/search';
 import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity';
@@ -18,6 +18,9 @@ export class UmbPickerSearchResultElement extends UmbLitElement {
 	@state()
 	_items: UmbEntityModel[] = [];
 
+	@state()
+	_isSearchable: boolean = false;
+
 	#pickerContext?: UmbPickerContext;
 
 	constructor() {
@@ -25,22 +28,16 @@ export class UmbPickerSearchResultElement extends UmbLitElement {
 
 		this.consumeContext(UMB_PICKER_CONTEXT, (context) => {
 			this.#pickerContext = context;
-
-			this.observe(this.#pickerContext.search.query, (query) => {
-				this._query = query;
-			});
-
-			this.observe(this.#pickerContext.search.searching, (query) => {
-				this._searching = query;
-			});
-
-			this.observe(this.#pickerContext.search.resultItems, (items) => {
-				this._items = items;
-			});
+			this.observe(this.#pickerContext.search.searchable, (isSearchable) => (this._isSearchable = isSearchable));
+			this.observe(this.#pickerContext.search.query, (query) => (this._query = query));
+			this.observe(this.#pickerContext.search.searching, (query) => (this._searching = query));
+			this.observe(this.#pickerContext.search.resultItems, (items) => (this._items = items));
 		});
 	}
 
 	override render() {
+		if (!this._isSearchable) return nothing;
+
 		if (this._query && this._searching === false && this._items.length === 0) {
 			return this.#renderEmptyResult();
 		}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search.element.ts
index e9ecefef78..b0663bf9d4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/picker/search/picker-search.element.ts
@@ -14,6 +14,9 @@ export class UmbPickerSearchElement extends UmbLitElement {
 	@state()
 	_searching: boolean = false;
 
+	@state()
+	_isSearchable: boolean = false;
+
 	#pickerContext?: UmbPickerContext;
 
 	constructor() {
@@ -21,14 +24,9 @@ export class UmbPickerSearchElement extends UmbLitElement {
 
 		this.consumeContext(UMB_PICKER_CONTEXT, (context) => {
 			this.#pickerContext = context;
-
-			this.observe(this.#pickerContext.search.searching, (searching) => {
-				this._searching = searching;
-			});
-
-			this.observe(this.#pickerContext.search.query, (query) => {
-				this._query = query?.query || '';
-			});
+			this.observe(this.#pickerContext.search.searchable, (isSearchable) => (this._isSearchable = isSearchable));
+			this.observe(this.#pickerContext.search.searching, (searching) => (this._searching = searching));
+			this.observe(this.#pickerContext.search.query, (query) => (this._query = query?.query || ''));
 		});
 	}
 
@@ -39,6 +37,8 @@ export class UmbPickerSearchElement extends UmbLitElement {
 	}
 
 	override render() {
+		if (!this._isSearchable) return nothing;
+
 		return html`
 			<uui-input .value=${this._query} placeholder="Search..." @input=${this.#onInput}>
 				<div slot="prepend">