fix: improve modal focus with dual autofocus strategy

HarshMN2345 · HarshMN2345 · commit d9ce3a498df1 · 2025-06-26T16:28:25.000+05:30
diff --git a/src/lib/components/billing/validateCreditModal.svelte b/src/lib/components/billing/validateCreditModal.svelte
@@ -58,6 +58,7 @@
         placeholder="Promo code"
         id="code"
         label="Add promo code"
+        autofocus
         bind:value={coupon} />
 
     <svelte:fragment slot="footer">
diff --git a/src/lib/components/feedback/evaluation.svelte b/src/lib/components/feedback/evaluation.svelte
@@ -1,7 +1,17 @@
 <script lang="ts">
+    import { onMount } from 'svelte';
     import { Tag } from '@appwrite.io/pink-svelte';
 
     export let value: number = null;
+
+    onMount(() => {
+        setTimeout(() => {
+            const firstButton = document.querySelector('[data-rating="0"]') as HTMLElement;
+            if (firstButton) {
+                firstButton.focus();
+            }
+        }, 150);
+    });
 </script>
 
 <fieldset class="u-margin-block-start-8 u-min-width-0">
@@ -10,7 +20,12 @@
         style="padding-block: 0.13rem">
         {#each Array(11) as _, i}
             <li>
-                <Tag size="m" selected={value === i} on:click={() => (value = i)}>
+                <Tag
+                    size="m"
+                    selected={value === i}
+                    autofocus={i === 0}
+                    data-rating={i}
+                    on:click={() => (value = i)}>
                     {i}
                 </Tag>
             </li>
diff --git a/src/lib/components/feedback/feedbackGeneral.svelte b/src/lib/components/feedback/feedbackGeneral.svelte
@@ -1,11 +1,22 @@
 <script lang="ts">
+    import { onMount } from 'svelte';
     import { InputTextarea } from '$lib/elements/forms';
     import { feedbackData } from '$lib/stores/feedback';
+
+    onMount(() => {
+        setTimeout(() => {
+            const textarea = document.getElementById('feedback') as HTMLTextAreaElement;
+            if (textarea) {
+                textarea.focus();
+            }
+        }, 150);
+    });
 </script>
 
 <InputTextarea
     required
     id="feedback"
+    autofocus
     bind:value={$feedbackData.message}
     label="Tell us more about your experience"
     placeholder="Share your suggestions and feature requests..." />
diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte
@@ -14,6 +14,7 @@
     };
     export let title = '';
     export let hideFooter = false;
+    export let autoFocus = true;
 
     let alert: HTMLElement;
 
@@ -26,6 +27,44 @@
     $: if (error) {
         alert?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
     }
+
+    $: if (show && autoFocus) {
+        setTimeout(() => {
+            focusFirstElement();
+        }, 100);
+    }
+
+    function focusFirstElement() {
+        const modalDialog = document.querySelector('dialog[open]') as HTMLElement;
+        if (!modalDialog) return;
+
+        const autofocusElement = modalDialog.querySelector('[autofocus]') as HTMLElement;
+        if (autofocusElement) {
+            autofocusElement.focus();
+            return;
+        }
+        const activeElement = document.activeElement;
+        if (activeElement && modalDialog.contains(activeElement)) {
+            return;
+        }
+        const focusableSelectors = [
+            'input:not([disabled]):not([readonly]):not([type="hidden"])',
+            'textarea:not([disabled]):not([readonly])',
+            'select:not([disabled])',
+            'button:not([disabled])',
+            'a[href]:not([disabled])',
+            '[tabindex]:not([tabindex="-1"]):not([disabled])',
+            '.card-selector:not([disabled])',
+            '[role="button"]:not([disabled])',
+            '[role="link"]:not([disabled])',
+            '[contenteditable="true"]:not([disabled])'
+        ].join(', ');
+
+        const firstFocusable = modalDialog.querySelector(focusableSelectors) as HTMLElement;
+        if (firstFocusable) {
+            firstFocusable.focus();
+        }
+    }
 </script>
 
 <Form isModal {onSubmit}>
diff --git a/src/lib/layout/createProject.svelte b/src/lib/layout/createProject.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { onMount } from 'svelte';
     import { Layout, Typography, Input, Tag, Icon } from '@appwrite.io/pink-svelte';
     import { IconPencil } from '@appwrite.io/pink-icons-svelte';
     import { CustomId } from '$lib/components/index.js';
@@ -14,6 +15,30 @@
     export let showTitle = true;
 
     let showCustomId = false;
+
+    onMount(() => {
+        setTimeout(() => {
+            let nameInput = document.querySelector(
+                'input[placeholder="Project name"]'
+            ) as HTMLInputElement;
+            if (!nameInput) {
+                nameInput = document.querySelector(
+                    'input[type="text"]:first-of-type'
+                ) as HTMLInputElement;
+            }
+            if (!nameInput) {
+                nameInput = document.querySelector('input:first-of-type') as HTMLInputElement;
+            }
+
+            console.log('CreateProject - Found input:', nameInput);
+            if (nameInput) {
+                nameInput.focus();
+                console.log('CreateProject - Focused project name input');
+            } else {
+                console.log('CreateProject - Could not find project name input');
+            }
+        }, 150);
+    });
 </script>
 
 <svelte:head>
@@ -34,6 +59,7 @@
                         label="Name"
                         placeholder="Project name"
                         required
+                        autofocus
                         bind:value={projectName} />
                     {#if !showCustomId}
                         <div>
diff --git a/src/routes/(console)/onboarding/create-organization/+page.svelte b/src/routes/(console)/onboarding/create-organization/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { onMount } from 'svelte';
     import { isCloud } from '$lib/system';
     import { sdk } from '$lib/stores/sdk';
     import { ID } from '@appwrite.io/console';
@@ -15,6 +16,29 @@
     let isLoading = false;
     let organizationName = 'Personal Projects';
 
+    onMount(() => {
+        setTimeout(() => {
+            let nameInput = document.querySelector(
+                'input[placeholder="Personal Projects"]'
+            ) as HTMLInputElement;
+            if (!nameInput) {
+                nameInput = document.querySelector('input[type="text"]') as HTMLInputElement;
+            }
+            if (!nameInput) {
+                nameInput = document.querySelector('input') as HTMLInputElement;
+            }
+
+            console.log('Found input:', nameInput);
+            if (nameInput) {
+                nameInput.focus();
+                nameInput.select();
+                console.log('Focused organization name input');
+            } else {
+                console.log('Could not find organization name input');
+            }
+        }, 100);
+    });
+
     async function createOrganization() {
         isLoading = true;
         let organization = null;
@@ -66,6 +90,7 @@
 
                     <Input.Text
                         required
+                        autofocus
                         disabled={isLoading}
                         label="Organization name"
                         bind:value={organizationName}
diff --git a/src/routes/(console)/onboarding/create-project/+page.svelte b/src/routes/(console)/onboarding/create-project/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { onMount } from 'svelte';
     import { Card, Layout, Button } from '@appwrite.io/pink-svelte';
     import { isCloud } from '$lib/system';
     import { sdk } from '$lib/stores/sdk';
@@ -22,6 +23,29 @@
 
     export let data;
 
+    onMount(() => {
+        setTimeout(() => {
+            let nameInput = document.querySelector(
+                'input[placeholder="Project name"]'
+            ) as HTMLInputElement;
+            if (!nameInput) {
+                nameInput = document.querySelector('input[type="text"]') as HTMLInputElement;
+            }
+            if (!nameInput) {
+                nameInput = document.querySelector('input') as HTMLInputElement;
+            }
+
+            console.log('Found input:', nameInput);
+            if (nameInput) {
+                nameInput.focus();
+                nameInput.select();
+                console.log('Focused project name input');
+            } else {
+                console.log('Could not find project name input');
+            }
+        }, 100);
+    });
+
     function markOnboardingComplete() {
         const currentPrefs = data.accountPrefs ?? $user.prefs;
 
@@ -102,7 +126,7 @@
                 on:submit={createProject}>
                 <svelte:fragment slot="submit">
                     <Layout.Stack direction="row" justifyContent="flex-end">
-                        <Button.Button autofocus type="submit" variant="primary" size="s">
+                        <Button.Button type="submit" variant="primary" size="s">
                             Create
                         </Button.Button>
                     </Layout.Stack>
diff --git a/src/routes/(console)/organization-[organization]/domains/add-domain/+page.svelte b/src/routes/(console)/organization-[organization]/domains/add-domain/+page.svelte
@@ -50,6 +50,7 @@
                         name="domain"
                         bind:value={domainName}
                         required
+                        autofocus
                         placeholder="example.com" />
 
                     <Divider />
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/createRecordModal.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/createRecordModal.svelte
@@ -84,7 +84,13 @@
         DNS records map domain names to IP addresses or other resources.
     </span>
     <Layout.Stack gap="l">
-        <InputText id="name" label="Name" placeholder="subdomain" bind:value={name} required />
+        <InputText
+            id="name"
+            label="Name"
+            placeholder="subdomain"
+            bind:value={name}
+            required
+            autofocus />
         <Layout.Stack gap="xs">
             <InputSelect options={recordTypes} bind:value={type} id="type" label="Type" required />
             <Input.Helper state="default">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
@@ -235,6 +235,7 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
                                 id="hostname"
                                 label="Hostname"
                                 placeholder="localhost"
+                                autofocus
                                 error={hostnameError && 'Please enter a valid hostname'}
                                 bind:value={hostname}>
                                 <Tooltip slot="info">
diff --git a/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/domains/add-domain/+page.svelte
@@ -77,6 +77,7 @@
             id="domain"
             bind:value={domainName}
             required
+            autofocus
             placeholder="appwrite.example.com" />
     </Form>
 
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/createPreviewDomainModal.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/createPreviewDomainModal.svelte
@@ -88,7 +88,7 @@
 
     <Layout.Stack>
         <Layout.Stack gap="s">
-            <InputText id="domain" placeholder="my-domain" bind:value={domain}>
+            <InputText id="domain" placeholder="my-domain" bind:value={domain} autofocus>
                 <svelte:fragment slot="end">
                     <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
                         .{$regionalConsoleVariables._APP_DOMAIN_SITES}
