Change submit trigger

Author: Llorenç

src/frontend/src/routes/(new-styling)/recovery-phrase/+page.svelte

@@ -13,6 +13,9 @@
   // Flag to prevent double-triggering recovery on multiple blur events
   let recoveryInProgress = $state(false);
 
+  // Timeout ID for debounced submission
+  let submitTimeoutId = $state<number | undefined>(undefined);
+
   // TODO: Use word validation instead of presence.
   const submitEnabled = $derived(
     words.every((word) => word.value.trim().length > 0),
@@ -21,6 +24,11 @@
   const handleKeyDownInput = (event: KeyboardEvent, currentIndex: number) => {
     const isLastIndex = currentIndex === words.length - 1;
     if (event.key === "Enter" && isLastIndex && submitEnabled) {
+      // Clear any pending timeout and submit immediately
+      if (submitTimeoutId !== undefined) {
+        clearTimeout(submitTimeoutId);
+        submitTimeoutId = undefined;
+      }
       handleRecoverWithPhrase();
       return;
     }
@@ -36,6 +44,18 @@
         }
       }
     }
+
+    // Clear existing timeout and start new one for auto-submit
+    if (submitTimeoutId !== undefined) {
+      clearTimeout(submitTimeoutId);
+    }
+
+    // Set 1 second timeout to auto-submit if all words are filled
+    submitTimeoutId = window.setTimeout(() => {
+      if (submitEnabled && !recoveryInProgress) {
+        handleRecoverWithPhrase();
+      }
+    }, 1000);
   };
 
   const handleRecoverWithPhrase = async () => {
@@ -92,20 +112,19 @@
       `recovery-phrase-${focusIndex}`,
     );
     // Don't set focus somewhere if all words are filled.
-    if (nonNullish(nextElement) && focusIndex < words.length - 1) {
+    if (nonNullish(nextElement) && focusIndex === words.length - 1) {
       nextElement.focus();
-    } else {
-      // This will trigger the recovery flow if all words are filled.
-      (event.currentTarget as HTMLElement)?.blur();
     }
   };
 
-  const handleBlur = () => {
-    // Auto-submit when all 24 words are complete
-    if (submitEnabled && !recoveryInProgress) {
-      handleRecoverWithPhrase();
-    }
-  };
+  // Cleanup timeout on component unmount
+  $effect(() => {
+    return () => {
+      if (submitTimeoutId !== undefined) {
+        clearTimeout(submitTimeoutId);
+      }
+    };
+  });
 </script>
 
 <div
@@ -132,7 +151,6 @@
                 bind:value={word.value}
                 onkeydown={(e) => handleKeyDownInput(e, i)}
                 onpaste={(e) => handlePaste(e, i)}
-                onblur={handleBlur}
                 class="peer text-text-primary ring-border-secondary focus:ring-border-brand h-8 w-full rounded-full border-none bg-transparent pl-10 text-base ring outline-none ring-inset focus:ring-2"
               />
               <!-- Left slot -->