From 242c9bd6015e69c856b8167e9d00ea9c6837c550 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 29 Jan 2025 16:06:41 +0530
Subject: [PATCH] update: allow focus on labels to trigger enter hit.

---
 src/lib/components/regionCard.svelte                 | 12 ++++++++++++
 .../organization-[organization]/wizard/step2.svelte  |  6 ++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/regionCard.svelte b/src/lib/components/regionCard.svelte
index 3e1964802..795451e46 100644
--- a/src/lib/components/regionCard.svelte
+++ b/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}
diff --git a/src/routes/(console)/organization-[organization]/wizard/step2.svelte b/src/routes/(console)/organization-[organization]/wizard/step2.svelte
index c28a43875..37841d20b 100644
--- a/src/routes/(console)/organization-[organization]/wizard/step2.svelte
+++ b/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}