fix:added focus for other buttons still need to add for others

Author: HarshMN2345

src/lib/components/feedback/evaluation.svelte

@@ -1,17 +1,7 @@
 <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">

src/lib/components/modal.svelte

@@ -14,7 +14,6 @@
     };
     export let title = '';
     export let hideFooter = false;
-    export let autoFocus = true;
 
     let alert: HTMLElement;
 
@@ -27,44 +26,6 @@
     $: 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}>

src/lib/layout/createProject.svelte

@@ -1,5 +1,4 @@
 <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';
@@ -15,30 +14,6 @@
     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>

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>

src/routes/(console)/onboarding/create-organization/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
     import { isCloud } from '$lib/system';
     import { sdk } from '$lib/stores/sdk';
     import { ID } from '@appwrite.io/console';
@@ -16,29 +15,6 @@
     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;

src/routes/(console)/onboarding/create-project/+page.svelte

@@ -1,5 +1,4 @@
 <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';
@@ -23,29 +22,6 @@
 
     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;
 

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

@@ -26,6 +26,7 @@
         name: string,
         error: string,
         role: string = isSelfHosted ? 'owner' : 'developer';
+        emailInput: HTMLInputElement;
 
     async function create() {
         try {
@@ -70,7 +71,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}

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>

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} />

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">