Fix: MFA Digits Losing Focus

src/lib/components/mfaChallengeFormList.svelte

@@ -1,4 +1,6 @@
 <script context="module" lang="ts">
+    let inputDigitFields: InputDigits;
+
     export async function verify(challenge: Models.MfaChallenge, code: string) {
         try {
             if (challenge == null) {
@@ -10,6 +12,7 @@
             await invalidate(Dependencies.ACCOUNT);
             trackEvent(Submit.AccountCreate);
         } catch (error) {
+            inputDigitFields?.clearInputsAndRefocus();
             trackError(error, Submit.AccountCreate);
             throw error;
         }
@@ -72,7 +75,7 @@
         {:else if challengeType == AuthenticationFactor.Phone}
             <p>A 6-digit verification code was sent to your phone, enter it below.</p>
         {/if}
-        <InputDigits bind:value={code} required autofocus {autoSubmit} />
+        <InputDigits bind:value={code} required autofocus {autoSubmit} bind:this={inputDigitFields} />
     {/if}
     {#if showVerifyButton}
         <FormItem>

src/lib/elements/forms/inputDigits.svelte

@@ -2,6 +2,8 @@
     import { onMount } from 'svelte';
     import { FormItem } from '.';
     import { createPinInput, melt } from '@melt-ui/svelte';
+    import { page } from '$app/stores';
+    import { sleep } from '$lib/helpers/promises';
 
     export let length: number = 6;
     export let value: string = '';
@@ -38,16 +40,55 @@
         }
     });
 
-    onMount(() => {
+    /**
+     * Clears the input fields and moves the focus to the first input.
+     * Usually used when resetting fields on auth fails, etc.
+     */
+    export function clearInputsAndRefocus() {
+        value = '';
+
+        if (element) {
+            const inputs = element.querySelectorAll('input');
+            inputs.forEach(input => input.value = '');
+            if (autofocus) inputs[0].focus();
+        }
+    }
+
+    async function focusDigitInputs() {
+        /**
+         * this is to re-focus the inputs that feels natural
+         * as the blinking of the cursor takes around 250ms.
+         */
+        await sleep(250);
+
         const interval = setInterval(() => {
             const input = element.querySelector('input');
             if (element) {
-                if (input && autofocus) {
+                /**
+                 * Ensure the value is empty before refocusing.
+                 *
+                 * If the value is not cleared and the form is submitted,
+                 * the cursor will move to the first field while the last field remains filled.
+                 * This would cause the focus to appear visually odd and very inconsistent.
+                 */
+                if (input && autofocus && value === '') {
                     input.focus();
                 }
                 clearInterval(interval);
             }
         }, 10);
+    }
+
+    onMount(() => {
+        /**
+         * Inputs will lose focus on any change.
+         * Changes include the url & query params like `?redirect=`.
+         *
+         * This subscription ensures that focus is restored when needed.
+         */
+        return page.subscribe(() => {
+            focusDigitInputs();
+        });
     });
 </script>