From fa28ed3d8edd6be2deac701311173d2769f15619 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Tue, 17 Sep 2024 13:18:58 +0200
Subject: [PATCH] MultipleColorPicker: Tab behaviour and new line on enter

---
 .../multiple-color-picker-input.element.ts    |  3 ++-
 ...ultiple-color-picker-item-input.element.ts | 21 +++++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts
index 11b9325f8b..a76e4e56c5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts
@@ -175,7 +175,7 @@ export class UmbMultipleColorPickerInputElement extends UUIFormControlMixin(UmbL
 			<div id="sorter-wrapper">
 				${repeat(
 					this._items,
-					(item) => item.value,
+					(item, index) => index,
 					(item, index) => html`
 						<umb-multiple-color-picker-item-input
 							label=${item.label}
@@ -185,6 +185,7 @@ export class UmbMultipleColorPickerInputElement extends UUIFormControlMixin(UmbL
 							?disabled=${this.disabled}
 							?readonly=${this.readonly}
 							?showLabels=${this.showLabels}
+							@enter=${this.#onAdd}
 							@change=${(event: UmbChangeEvent) => this.#onChange(event, index)}
 							@delete=${(event: UmbDeleteEvent) => this.#deleteItem(event, index)}>
 						</umb-multiple-color-picker-item-input>
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts
index 2513799e64..6652dce46e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts
@@ -84,12 +84,25 @@ export class UmbMultipleColorPickerItemInputElement extends UUIFormControlMixin(
 		this.dispatchEvent(new UmbInputEvent());
 	}
 
+	#onLabelKeydown(event: KeyboardEvent) {
+		event.stopPropagation();
+		const target = event.currentTarget as UUIInputElement;
+		if (event.key === 'Enter' && target.value) {
+			this.dispatchEvent(new CustomEvent('enter'));
+		}
+	}
+
 	#onLabelChange(event: UUIInputEvent) {
 		event.stopPropagation();
 		this.label = event.target.value as string;
 		this.dispatchEvent(new UmbChangeEvent());
 	}
 
+	#onValueKeydown(event: KeyboardEvent) {
+		event.stopPropagation();
+		if (event.key === 'Enter') this.#onColorClick();
+	}
+
 	#onValueChange(event: UUIInputEvent) {
 		event.stopPropagation();
 		this.value = event.target.value as string;
@@ -145,6 +158,7 @@ export class UmbMultipleColorPickerItemInputElement extends UUIFormControlMixin(
 							placeholder=${this.localize.term('general_value')}
 							required=${this.required}
 							required-message="Value is missing"
+							@keydown=${this.#onValueKeydown}
 							@input=${this.#onValueInput}
 							@change=${this.#onValueChange}>
 							<uui-color-swatch
@@ -162,6 +176,7 @@ export class UmbMultipleColorPickerItemInputElement extends UUIFormControlMixin(
 								label=${this.localize.term('placeholders_label')}
 								placeholder=${this.localize.term('placeholders_label')}
 								value=${ifDefined(this.label)}
+								@keydown=${this.#onLabelKeydown}
 								@input="${this.#onLabelInput}"
 								@change="${this.#onLabelChange}"
 								?disabled=${this.disabled}
@@ -210,6 +225,12 @@ export class UmbMultipleColorPickerItemInputElement extends UUIFormControlMixin(
 				padding: var(--uui-size-1);
 			}
 
+			uui-color-swatch:focus-within {
+				outline: 2px solid var(--uui-color-selected);
+				outline-offset: 0;
+				border-radius: var(--uui-border-radius);
+			}
+
 			.color-wrapper {
 				position: relative;
 				flex: 1;