From 1ef03c3037245cc25ae177ef1b9b89701f76e18d Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Mon, 22 Apr 2024 12:51:10 +0100
Subject: [PATCH] Adds "multiple" UI to Dropdown property-editor

---
 .../property-editor-ui-dropdown.element.ts    | 58 +++++++++++++++----
 1 file changed, 47 insertions(+), 11 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/property-editor-ui-dropdown.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/property-editor-ui-dropdown.element.ts
index fbc1b7a7d8..33ce19ca04 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/property-editor-ui-dropdown.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/dropdown/property-editor-ui-dropdown.element.ts
@@ -1,6 +1,7 @@
-import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, map, property, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
+import { UUISelectElement } from '@umbraco-cms/backoffice/external/uui';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
@@ -21,29 +22,64 @@ export class UmbPropertyEditorUIDropdownElement extends UmbLitElement implements
 	}
 
 	@state()
-	private _list: Array<Option> = [];
+	private _items: Array<Option> = [];
 
 	@state()
-	private _multiple?: boolean;
+	private _multiple: boolean = false;
 
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
-		const listData: string[] | undefined = config?.getValueByAlias('items');
-		this._list = listData?.map((x) => ({ value: x, name: x, selected: this.#selection.includes(x) })) ?? [];
-		this._multiple = config?.getValueByAlias('multiple');
+		if (!config) return;
+
+		const items = config.getValueByAlias<string[]>('items');
+		this._items = items?.map((item) => ({ value: item, name: item, selected: this.#selection.includes(item) })) ?? [];
+
+		this._multiple = config?.getValueByAlias<boolean>('multiple') ?? false;
 	}
 
 	#onChange(event: UUISelectEvent) {
 		const value = event.target.value as string;
-		this.value = value ? [value] : [];
+		this.#setValue(value ? [value] : []);
+	}
+
+	#onChangeMulitple(event: Event & { target: HTMLSelectElement }) {
+		const selected = event.target.selectedOptions;
+		const value = selected ? Array.from(selected).map((option) => option.value) : [];
+		this.#setValue(value);
+	}
+
+	#setValue(value: Array<string> | string | null | undefined) {
+		if (!value) return;
+		this.value = value;
 		this.dispatchEvent(new UmbPropertyValueChangeEvent());
 	}
 
 	render() {
-		return html`<umb-input-dropdown-list
-			@change="${this.#onChange}"
-			?multiple=${this._multiple}
-			.options="${this._list}"></umb-input-dropdown-list>`;
+		return this._multiple ? this.#renderDropdownMultiple() : this.#renderDropdownSingle();
 	}
+
+	#renderDropdownMultiple() {
+		return html`
+			<select id="native" multiple @change=${this.#onChangeMulitple}>
+				${map(
+					this._items,
+					(item) => html`<option value=${item.value} ?selected=${item.selected}>${item.name}</option>`,
+				)}
+			</select>
+		`;
+	}
+
+	#renderDropdownSingle() {
+		return html`<umb-input-dropdown-list .options=${this._items} @change=${this.#onChange}></umb-input-dropdown-list>`;
+	}
+
+	static styles = [
+		UUISelectElement.styles,
+		css`
+			#native {
+				height: auto;
+			}
+		`,
+	];
 }
 
 export default UmbPropertyEditorUIDropdownElement;