From ca59fcd8d91fa389dffa1f42972009bea98df8a2 Mon Sep 17 00:00:00 2001
From: Pulse Monitor <pulse@pulse-monitor.dev>
Date: Thu, 4 Sep 2025 19:50:49 +0000
Subject: [PATCH] fix: webhook header input losing focus when typing (addresses
 #412)

The header key input was losing focus after each keystroke due to improper state updates that caused unnecessary re-renders. Fixed by preserving the header object order and avoiding the use of array indices.
---
 .../src/components/Alerts/WebhookConfig.tsx   | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/frontend-modern/src/components/Alerts/WebhookConfig.tsx b/frontend-modern/src/components/Alerts/WebhookConfig.tsx
index d6ea05f83..679adb918 100644
--- a/frontend-modern/src/components/Alerts/WebhookConfig.tsx
+++ b/frontend-modern/src/components/Alerts/WebhookConfig.tsx
@@ -377,18 +377,25 @@ export function WebhookConfig(props: WebhookConfigProps) {
             </label>
             <div class="space-y-2">
               <For each={Object.entries(formData().headers || {})}>
-                {([key, value], index) => (
+                {([key, value]) => (
                   <div class="flex gap-2">
                     <input
                       type="text"
                       value={key}
                       onInput={(e) => {
-                        const headers = { ...formData().headers };
-                        const oldKey = Object.keys(headers)[index()];
-                        if (oldKey !== e.currentTarget.value) {
-                          delete headers[oldKey];
-                          headers[e.currentTarget.value] = value;
-                          setFormData({ ...formData(), headers });
+                        const newKey = e.currentTarget.value;
+                        if (key !== newKey) {
+                          const headers = { ...formData().headers };
+                          // Preserve order by rebuilding the headers object
+                          const newHeaders: Record<string, string> = {};
+                          for (const [k, v] of Object.entries(headers)) {
+                            if (k === key) {
+                              newHeaders[newKey] = v;
+                            } else {
+                              newHeaders[k] = v;
+                            }
+                          }
+                          setFormData({ ...formData(), headers: newHeaders });
                         }
                       }}
                       placeholder="Header Name"