From 3eea89b6d68a7ce3f4ca1933e207173e5ac35d1b Mon Sep 17 00:00:00 2001
From: biast12 <tobiaspoulsen@hotmail.com>
Date: Tue, 24 Feb 2026 23:47:01 +0100
Subject: [PATCH] Fix save button validation not reliably reflecting input
 state

Validation state from FormInputRow was not reliably reaching the parent Forms.svelte due to Svelte's $: blocks firing during component initialization before on: listeners are guaranteed to be attached.

Fixes:
- Add onMount dispatch in FormInputRow to guarantee initial validation state is sent after mount
- Add hasValidationErrors guard in saveInputs() to block invalid saves regardless of button UI state
- Assign stable _key to new inputs so inputValidationErrors uses a consistent key instead of the loop index, which shifts on reorder/delete
---
 frontend/src/components/manage/FormInputRow.svelte | 14 +++++++++++---
 frontend/src/views/Forms.svelte                    |  9 +++++++--
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/manage/FormInputRow.svelte b/frontend/src/components/manage/FormInputRow.svelte
index 8974daf..a9cff06 100644
--- a/frontend/src/components/manage/FormInputRow.svelte
+++ b/frontend/src/components/manage/FormInputRow.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { createEventDispatcher } from "svelte";
+    import { createEventDispatcher, onMount } from "svelte";
     const dispatch = createEventDispatcher();
 
     import Input from "../form/Input.svelte";
@@ -19,7 +19,7 @@
     export let formId;
 
     export let data = {};
-    export let hasValidationErrors = false;
+    let hasValidationErrors = false;
 
     // Initialize options if not present (for types that need options: 3, 21, 22)
     $: if ((data.type === 3 || data.type === 21 || data.type === 22) && !data.options) {
@@ -96,7 +96,15 @@
     $: hasInvalidDescription = data.description && data.description.length > 100;
 
     // Overall validation error flag
-    $: hasValidationErrors = hasDuplicateValues || hasNoOptions || hasInvalidLabel || hasInvalidDescription;
+    $: {
+        hasValidationErrors = hasDuplicateValues || hasNoOptions || hasInvalidLabel || hasInvalidDescription;
+        dispatch('validationchange', hasValidationErrors);
+    }
+
+    // Also dispatch after mount — $: blocks run during init before listeners are guaranteed attached
+    onMount(() => {
+        dispatch('validationchange', hasValidationErrors);
+    });
 
     $: windowWidth = 0;
 
diff --git a/frontend/src/views/Forms.svelte b/frontend/src/views/Forms.svelte
index 4843a36..26a603b 100644
--- a/frontend/src/views/Forms.svelte
+++ b/frontend/src/views/Forms.svelte
@@ -138,6 +138,7 @@
             max_length: 255,
             is_new: true,
             type: 4, // Text Input
+            _key: Math.random(),
         };
 
         form.inputs = [...form.inputs, input];
@@ -150,7 +151,7 @@
         let idx = form.inputs.findIndex((i) => i === input);
 
         // Clean up validation error for the deleted input
-        delete inputValidationErrors[input.id || idx];
+        delete inputValidationErrors[input.id || input._key || idx];
 
         form.inputs.splice(idx, 1);
         for (let i = idx; i < form.inputs.length; i++) {
@@ -197,6 +198,7 @@
     }
 
     async function saveInputs() {
+        if (hasValidationErrors) return;
         const form = getForm(activeFormId);
 
         const data = {
@@ -374,7 +376,10 @@
                                     withDirectionButtons={true}
                                     index={i}
                                     {formLength}
-                                    bind:hasValidationErrors={inputValidationErrors[input.id || i]}
+                                    on:validationchange={(e) => {
+                                        inputValidationErrors[input.id || input._key || i] = e.detail;
+                                        inputValidationErrors = inputValidationErrors;
+                                    }}
                                     on:delete={() =>
                                         deleteInput(activeFormId, input)}
                                     on:move={(e) =>