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.
This commit is contained in:
Pulse Monitor
2025-09-04 19:50:49 +00:00
parent 2c4a8a3fc1
commit 2e9930bee7
@@ -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"