Merge pull request #2049 from HarshMN2345/fix-PRO-1882-modal-focus-fix

ItzNotABug · web-flow · commit d217a0573a3e · 2025-06-30T18:51:37.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
@@ -10,7 +10,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
@@ -6,6 +6,7 @@
 <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/navbar.svelte b/src/lib/components/navbar.svelte
@@ -51,7 +51,7 @@
     import { base } from '$app/paths';
     import { logout } from '$lib/helpers/logout';
     import { app } from '$lib/stores/app';
-    import { isTabletViewport } from '$lib/stores/viewport';
+    import { isTabletViewport, isSmallViewport } from '$lib/stores/viewport';
     import { isCloud } from '$lib/system.js';
     import { user } from '$lib/stores/user';
     import { Click, trackEvent } from '$lib/actions/analytics';
@@ -166,20 +166,22 @@
                         >Upgrade</Button.Anchor>
                 {/if}
 
-                <DropList show={$feedback.show} class="extended-width">
-                    <Button.Button
-                        type="button"
-                        variant="compact"
-                        on:click={() => {
-                            toggleFeedback();
-                            trackEvent(Click.FeedbackSubmitClick, { source: 'top_nav' });
-                        }}
-                        >Feedback
-                    </Button.Button>
-                    <svelte:fragment slot="other">
-                        <Feedback />
-                    </svelte:fragment>
-                </DropList>
+                {#if !$isSmallViewport}
+                    <DropList show={$feedback.show} class="extended-width">
+                        <Button.Button
+                            type="button"
+                            variant="compact"
+                            on:click={() => {
+                                toggleFeedback();
+                                trackEvent(Click.FeedbackSubmitClick, { source: 'top_nav' });
+                            }}
+                            >Feedback
+                        </Button.Button>
+                        <svelte:fragment slot="other">
+                            <Feedback />
+                        </svelte:fragment>
+                    </DropList>
+                {/if}
                 <DropList
                     noArrow
                     scrollable
diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
@@ -35,7 +35,7 @@
     import MobileSupportModal from '$routes/(console)/wizard/support/mobileSupportModal.svelte';
     import MobileFeedbackModal from '$routes/(console)/wizard/feedback/mobileFeedbackModal.svelte';
     import { getSidebarState, updateSidebarState } from '$lib/helpers/sidebar';
-    import { isTabletViewport } from '$lib/stores/viewport';
+    import { isTabletViewport, isSmallViewport } from '$lib/stores/viewport';
     import { Click, trackEvent } from '$lib/actions/analytics';
 
     import type { HTMLAttributes } from 'svelte/elements';
@@ -255,7 +255,7 @@
                         </Tooltip>
                     </div>
                 </Layout.Stack>
-            {:else}
+            {:else if $isSmallViewport}
                 <div class="action-buttons">
                     <Layout.Stack direction="column" gap="s">
                         <DropList show={$feedback.show} scrollable>
@@ -282,7 +282,6 @@
                                     trackEvent(Click.SupportOpenClick, { source: 'side_nav' });
                                 }}>
                                 <span>Support</span>
-
                                 <svelte:fragment slot="other">
                                     <MobileSupportModal bind:show={$showSupportModal}
                                     ></MobileSupportModal>
@@ -314,43 +313,33 @@
                 </div>
             {/if}
 
-            {#if project}
-                <div class="only-mobile">
-                    <div class="action-buttons">
-                        <Layout.Stack direction="column" gap="s">
-                            <DropList show={$feedback.show} scrollable>
-                                <Button.Button
-                                    variant="secondary"
-                                    size="s"
-                                    on:click={() => {
-                                        toggleFeedback();
-                                        trackEvent('click_menu_feedback', { source: 'side_nav' });
-                                    }}
-                                    ><span>Feedback</span>
-                                </Button.Button>
-                                <svelte:fragment slot="other">
-                                    <MobileFeedbackModal />
-                                </svelte:fragment>
-                            </DropList>
-
-                            <DropList show={$showSupportModal} scrollable>
-                                <Button.Button
-                                    variant="secondary"
-                                    size="s"
-                                    on:click={() => {
-                                        $showSupportModal = true;
-                                        trackEvent(Click.SupportOpenClick, { source: 'side_nav' });
-                                    }}>
-                                    <span>Support</span>
-
-                                    <svelte:fragment slot="other">
-                                        <MobileSupportModal bind:show={$showSupportModal}
-                                        ></MobileSupportModal>
-                                    </svelte:fragment>
-                                </Button.Button>
-                            </DropList>
-                        </Layout.Stack>
-                    </div>
+            {#if project && $isSmallViewport}
+                <div class="action-buttons">
+                    <Layout.Stack direction="column" gap="s">
+                        <DropList show={$feedback.show} scrollable>
+                            <Button.Button
+                                variant="secondary"
+                                size="s"
+                                on:click={() => {
+                                    toggleFeedback();
+                                    trackEvent('click_menu_feedback', { source: 'side_nav' });
+                                }}
+                                ><span>Feedback</span>
+                            </Button.Button>
+                        </DropList>
+
+                        <DropList show={$showSupportModal} scrollable>
+                            <Button.Button
+                                variant="secondary"
+                                size="s"
+                                on:click={() => {
+                                    $showSupportModal = true;
+                                    trackEvent(Click.SupportOpenClick, { source: 'side_nav' });
+                                }}>
+                                <span>Support</span>
+                            </Button.Button>
+                        </DropList>
+                    </Layout.Stack>
                 </div>
             {/if}
         </div>
diff --git a/src/lib/layout/createProject.svelte b/src/lib/layout/createProject.svelte
@@ -34,6 +34,7 @@
                         label="Name"
                         placeholder="Project name"
                         required
+                        autofocus
                         bind:value={projectName} />
                     {#if !showCustomId}
                         <div>
diff --git a/src/routes/(console)/create-organization/+page.svelte b/src/routes/(console)/create-organization/+page.svelte
@@ -186,6 +186,7 @@
                     bind:value={name}
                     label="Organization name"
                     placeholder="Enter organization name"
+                    autofocus
                     id="name"
                     required />
             </Fieldset>
diff --git a/src/routes/(console)/onboarding/create-organization/+page.svelte b/src/routes/(console)/onboarding/create-organization/+page.svelte
@@ -70,6 +70,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
@@ -102,7 +102,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]/createMember.svelte b/src/routes/(console)/organization-[organization]/createMember.svelte
@@ -70,7 +70,7 @@
         id="email"
         label="Email"
         placeholder="Enter email"
-        autofocus={true}
+        autofocus
         bind:value={email} />
     <InputText id="member-name" label="Name" placeholder="Enter name" bind:value={name} />
     {#if isCloud}
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)/organization-[organization]/members/+page.svelte b/src/routes/(console)/organization-[organization]/members/+page.svelte
@@ -73,7 +73,7 @@
         <ConsoleButton
             size="s"
             event="create_user"
-            on:mousedown={() => newMemberModal.set(true)}
+            on:click={() => newMemberModal.set(true)}
             disabled={isCloud ? !$currentPlan?.addons?.seats?.supported : false}>
             <Icon size="s" icon={IconPlus} slot="start" />
             <span class="text">Invite</span>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/+page.svelte
@@ -60,7 +60,7 @@
         </Layout.Stack>
         <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
             <ViewSelector view={View.Table} {columns} hideView />
-            <Button on:mousedown={() => ($showCreateUser = true)} event="create_user" size="s">
+            <Button on:click={() => ($showCreateUser = true)} event="create_user" size="s">
                 <Icon size="s" icon={IconPlus} slot="start" />
                 <span class="text">Create user</span>
             </Button>
@@ -173,7 +173,7 @@
             href="https://appwrite.io/docs/references/cloud/server-nodejs/users"
             target="user"
             allowCreate={$canWriteUsers}
-            on:mousedown={() => showCreateUser.set(true)} />
+            on:click={() => showCreateUser.set(true)} />
     {/if}
 </Container>
 
diff --git a/src/routes/(console)/project-[region]-[project]/auth/createUser.svelte b/src/routes/(console)/project-[region]-[project]/auth/createUser.svelte
@@ -56,7 +56,7 @@
 </script>
 
 <Modal title="Create user" {error} bind:show={showCreate} onSubmit={create}>
-    <InputText id="name" label="Name" placeholder="Enter name" autofocus={true} bind:value={name} />
+    <InputText autofocus id="name" label="Name" placeholder="Enter name" bind:value={name} />
     <InputEmail id="email" label="Email" placeholder="Enter email" bind:value={mail} />
     <InputPhone id="phone" label="Phone" placeholder="Enter phone" bind:value={phone} />
     <InputPassword id="password" label="Password" placeholder="Enter password" bind:value={pass} />
diff --git a/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/createMembership.svelte b/src/routes/(console)/project-[region]-[project]/auth/teams/team-[team]/createMembership.svelte
@@ -52,7 +52,7 @@
         label="Email"
         placeholder="Enter email"
         required={true}
-        autofocus={true}
+        autofocus
         bind:value={email} />
     <InputText id="name" label="Name" placeholder="Enter name" bind:value={name} />
     <Alert.Inline status="info">
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/email.svelte b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/email.svelte
@@ -106,6 +106,7 @@
                         id="subject"
                         label="Subject"
                         required
+                        autofocus={true}
                         placeholder="Enter subject"
                         bind:value={subject}>
                     </InputText>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/push.svelte b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/push.svelte
@@ -116,6 +116,7 @@
                         id="title"
                         label="Title"
                         required
+                        autofocus
                         placeholder="Enter title"
                         bind:value={title}>
                     </InputText>
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/sms.svelte b/src/routes/(console)/project-[region]-[project]/messaging/create-[type]/(type)/sms.svelte
@@ -96,6 +96,7 @@
                         id="message"
                         label="Message"
                         required
+                        autofocus
                         maxlength={900}
                         placeholder="Type here..."
                         bind:value={content}>
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}
diff --git a/src/routes/(console)/project-[region]-[project]/storage/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
@@ -44,10 +44,7 @@
                 hideColumns={!data.buckets.total}
                 hideView={!data.buckets.total} />
             {#if $canWriteBuckets}
-                <Button
-                    on:mousedown={() => ($showCreateBucket = true)}
-                    event="create_bucket"
-                    size="s">
+                <Button on:click={() => ($showCreateBucket = true)} event="create_bucket" size="s">
                     <Icon icon={IconPlus} slot="start" size="s" />
                     Create bucket
                 </Button>
