From 55769c8a1979f6a3cfa280fe1664aec20ec1e8dd Mon Sep 17 00:00:00 2001
From: JesmoDev <26099018+JesmoDev@users.noreply.github.com>
Date: Thu, 2 May 2024 14:30:45 +0200
Subject: [PATCH] focus

---
 .../components/input-webhook-headers.element.ts   | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/webhook/components/input-webhook-headers.element.ts b/src/Umbraco.Web.UI.Client/src/packages/webhook/components/input-webhook-headers.element.ts
index f5ae10e767..8c8ab1603a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/webhook/components/input-webhook-headers.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/webhook/components/input-webhook-headers.element.ts
@@ -44,6 +44,17 @@ export class UmbInputWebhookHeadersElement extends UmbLitElement {
 		}
 	}
 
+	#addHeader() {
+		this._headers = [...this._headers, { name: '', value: '' }];
+
+		requestAnimationFrame(() => {
+			// Focus newly added input
+			const inputs = this.shadowRoot?.querySelectorAll('input[type="text"]');
+			const lastInput = inputs?.[inputs.length - 2] as HTMLInputElement | undefined;
+			lastInput?.focus();
+		});
+	}
+
 	#removeHeader(index: number) {
 		this._headers = this._headers.filter((_, i) => i !== index);
 	}
@@ -97,10 +108,6 @@ export class UmbInputWebhookHeadersElement extends UmbLitElement {
 		`;
 	}
 
-	#addHeader() {
-		this._headers = [...this._headers, { name: '', value: '' }];
-	}
-
 	render() {
 		return html`
 			${this.#renderHeaders()}