fix: autofocus on conditional inputs.

src/lib/components/billing/selectPaymentMethod.svelte

@@ -140,6 +140,7 @@
                         <InputText
                             id="taxId"
                             label="Tax ID"
+                            autofocus
                             placeholder="Tax ID"
                             bind:value={taxId} />
                     </div>

src/lib/elements/forms/inputNumber.svelte

@@ -24,11 +24,17 @@
     let error: string;
 
     onMount(() => {
-        if (element && autofocus) {
-            element.focus();
+        if (autofocus) {
+            addInputFocus();
         }
     });
 
+    export function addInputFocus() {
+        if (element) {
+            element.focus();
+        }
+    }
+
     const handleInvalid = (event: Event) => {
         event.preventDefault();
 

src/routes/(console)/organization-[organization]/billing/addCreditModal.svelte

@@ -40,7 +40,12 @@
     Apply Appwrite credits to your organization.
 
     <FormList>
-        <InputText placeholder="Promo code" id="code" label="Add promo code" bind:value={coupon} />
+        <InputText
+            placeholder="Promo code"
+            id="code"
+            autofocus
+            label="Add promo code"
+            bind:value={coupon} />
     </FormList>
 
     <svelte:fragment slot="footer">

src/routes/(console)/organization-[organization]/billing/budgetCap.svelte

@@ -84,6 +84,7 @@
                         <InputNumber
                             placeholder="Add budget cap"
                             id="cap"
+                            autofocus
                             label="Budget cap (USD)"
                             bind:value={budget} />
                     {/if}

src/routes/(console)/project-[project]/auth/security/updatePasswordHistory.svelte

@@ -8,6 +8,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { project } from '../../store';
+    import { tick } from 'svelte';
 
     let passwordHistory = $project?.authPasswordHistory < 1 ? 5 : $project?.authPasswordHistory;
     let passwordHistoryEnabled = ($project?.authPasswordHistory ?? 0) !== 0;
@@ -34,6 +35,14 @@
             trackError(error, Submit.AuthPasswordHistoryUpdate);
         }
     }
+
+    let maxSessionInputField: InputNumber | null = null;
+
+    $: if (passwordHistoryEnabled && maxSessionInputField) {
+        tick().then(() => {
+            maxSessionInputField.addInputFocus();
+        });
+    }
 </script>
 
 <Form onSubmit={updatePasswordHistoryLimit}>
@@ -59,6 +68,7 @@
                     min={1}
                     id="max-session"
                     label="Limit"
+                    bind:this={maxSessionInputField}
                     disabled={!passwordHistoryEnabled}
                     bind:value={passwordHistory} />
             </FormList>

src/routes/(console)/project-[project]/auth/security/updateUsersLimit.svelte

@@ -9,6 +9,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { project } from '../../store';
+    import { tick } from 'svelte';
 
     let isLimited = $project?.authLimit !== 0;
     let newLimit = isLimited ? $project?.authLimit : 100;
@@ -41,6 +42,14 @@
             trackError(error, Submit.AuthLimitUpdate);
         }
     }
+
+    let maxUsersInputField: HTMLInputElement | null = null;
+
+    $: if (isLimited && maxUsersInputField) {
+        tick().then(() => {
+            maxUsersInputField.focus();
+        });
+    }
 </script>
 
 <CardGrid>
@@ -96,7 +105,8 @@
                         class="input-text"
                         max="10000"
                         disabled={!isLimited}
-                        bind:value={newLimit} />
+                        bind:value={newLimit}
+                        bind:this={maxUsersInputField} />
                 </div>
             </li>
         </ul>