From 8f5716b4345491752890de442d82f53397f74113 Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bf@mcb.dk>
Date: Sat, 25 Oct 2025 17:38:56 +0200
Subject: [PATCH] Create new folder on enter in media picker

---
 .../media-picker-folder-path.element.ts           | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/components/media-picker-folder-path.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/components/media-picker-folder-path.element.ts
index 7aa35f9370f9..6314c3991e43 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/components/media-picker-folder-path.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/modals/media-picker/components/media-picker-folder-path.element.ts
@@ -136,6 +136,15 @@ export class UmbMediaPickerFolderPathElement extends UmbLitElement {
 		this.dispatchEvent(new UmbChangeEvent());
 	}
 
+	#onKeypress(e: UUIInputEvent) {
+		if (e.key === 'Enter') {
+			requestAnimationFrame(() => {
+				const element = this.getHostElement().shadowRoot!.querySelector('#new-folder') as UUIInputElement;
+				element.blur();
+			});
+		}
+	}
+
 	override render() {
 		return html`<div id="path">
 			${repeat(
@@ -154,8 +163,12 @@ export class UmbMediaPickerFolderPathElement extends UmbLitElement {
 						label="enter a name"
 						value="new folder name"
 						@blur=${this.#addFolder}
+						@keypress=${this.#onKeypress}
+						style="margin-left: var(--uui-size-2);"
 						auto-width></uui-input>`
-				: html`<uui-button label="add folder" compact @click=${this.#focusFolderInput}>+</uui-button>`}
+				: html`<uui-button label="add folder" compact @click=${this.#focusFolderInput}>
+				<uui-icon name="icon-add" style="--uui-icon-color:inherit;"></uui-icon>
+			</uui-button>`}
 		</div>`;
 	}