Merge pull request #1637 from appwrite/fix-enter-on-regions

Allow focus on labels to trigger enter hit

Author: ItzNotABug

src/lib/components/regionCard.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
+    import { onMount } from 'svelte';
+
     export let name: string;
     export let group: string;
     export let value: string | number | boolean;
     export let disabled = false;
     export let padding = 1;
+    export let autofocus = false;
     export let fullHeight = true;
     export let borderRadius: 'xsmall' | 'small' | 'medium' | 'large' = 'small';
 
@@ -13,9 +16,18 @@
         medium = '--border-radius-medium',
         large = '--border-radius-large'
     }
+
+    let labelReference: HTMLLabelElement | null = null;
+
+    onMount(() => {
+        if (autofocus) {
+            labelReference?.focus();
+        }
+    });
 </script>
 
 <label
+    bind:this={labelReference}
     class="box u-cursor-pointer u-flex u-flex-vertical u-gap-16"
     class:is-allow-focus={!disabled}
     class:is-disabled={disabled}

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

@@ -77,13 +77,15 @@
                         return 1;
                     }
                     return -1;
-                }) as region}
+                }) as region, index}
                 <li>
                     <RegionCard
                         name="region"
                         bind:group={$createProject.region}
                         value={region.$id}
-                        disabled={region.disabled}>
+                        disabled={region.disabled}
+                        autofocus={index === 0}>
+                        <!-- focus first item so enter key works! -->
                         <div
                             class="u-flex u-flex-vertical u-gap-8 u-justify-main-center u-cross-center u-margin-inline-auto">
                             {#if region.disabled}