From 7a7f1d27e0f96521c3218bc77dad91c951569fe2 Mon Sep 17 00:00:00 2001
From: armaan <armaan@stack-auth.com>
Date: Fri, 3 Jul 2026 17:58:29 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20address=20remaining=20review=20comments?=
 =?UTF-8?q?=20=E2=80=94=20arrow-key=20nav,=20IME=20guard,=20test=20resilie?=
 =?UTF-8?q?nce?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 .../new-project/page-client-parts/content.tsx |  2 +-
 .../new-project/page-client.test.tsx          |  3 +-
 .../components/hosted-auth-preview.test.tsx   |  2 +-
 .../src/components/hosted-auth-preview.tsx    | 28 +++++++++++++++++++
 4 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/content.tsx b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/content.tsx
index f8b251826..29a524d1d 100644
--- a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/content.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client-parts/content.tsx
@@ -182,7 +182,7 @@ function PageClientInner() {
   }, [createProject, creatingProject, hasProjectName]);
 
   const handleProjectNameKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) => {
-    if (event.key !== "Enter") {
+    if (event.key !== "Enter" || event.nativeEvent.isComposing) {
       return;
     }
 
diff --git a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client.test.tsx b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client.test.tsx
index 8fdd140b6..e3ee335e4 100644
--- a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client.test.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/new-project/page-client.test.tsx
@@ -148,7 +148,8 @@ describe("OnboardingPage", () => {
     );
 
     const backButtonClassName = screen.getByRole("button", { name: "Go back to previous step" }).getAttribute("class") ?? "";
-    const progressRailClassName = screen.getByRole("button", { name: "Apps" }).parentElement?.parentElement?.getAttribute("class") ?? "";
+    const progressRail = screen.getByRole("button", { name: "Apps" }).closest(".w-\\[150px\\]");
+    const progressRailClassName = progressRail?.getAttribute("class") ?? "";
 
     expect(backButtonClassName).toContain("inline-flex");
     expect(backButtonClassName).toContain("absolute");
diff --git a/apps/dashboard/src/components/hosted-auth-preview.test.tsx b/apps/dashboard/src/components/hosted-auth-preview.test.tsx
index ecaa69065..a66905248 100644
--- a/apps/dashboard/src/components/hosted-auth-preview.test.tsx
+++ b/apps/dashboard/src/components/hosted-auth-preview.test.tsx
@@ -40,7 +40,7 @@ describe("HostedAuthMethodPreview", () => {
 
     fireEvent.click(screen.getByRole("tab", { name: "Email & Password" }));
 
-    expect(screen.getByLabelText("Password")).toBeDefined();
+    screen.getByLabelText("Password");
     expect(screen.getByRole("tab", { name: "Email & Password" }).getAttribute("data-state")).toBe("active");
   });
 });
diff --git a/apps/dashboard/src/components/hosted-auth-preview.tsx b/apps/dashboard/src/components/hosted-auth-preview.tsx
index ba50653d5..c561bba41 100644
--- a/apps/dashboard/src/components/hosted-auth-preview.tsx
+++ b/apps/dashboard/src/components/hosted-auth-preview.tsx
@@ -95,11 +95,39 @@ function HostedPreviewTabsList({ className, children, ...props }: HTMLAttributes
     return () => observer.disconnect();
   }, [measure]);
 
+  const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+    const container = containerRef.current;
+    if (container == null) {
+      return;
+    }
+    const tabs = Array.from(container.querySelectorAll<HTMLElement>('[role="tab"]'));
+    const currentIndex = tabs.findIndex((tab) => tab === document.activeElement);
+    if (currentIndex === -1) {
+      return;
+    }
+    let nextIndex: number | null = null;
+    if (event.key === "ArrowRight") {
+      nextIndex = (currentIndex + 1) % tabs.length;
+    } else if (event.key === "ArrowLeft") {
+      nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+    } else if (event.key === "Home") {
+      nextIndex = 0;
+    } else if (event.key === "End") {
+      nextIndex = tabs.length - 1;
+    }
+    if (nextIndex != null) {
+      event.preventDefault();
+      tabs[nextIndex].focus();
+      tabs[nextIndex].click();
+    }
+  }, []);
+
   return (
     <div
       ref={containerRef}
       role="tablist"
       className={cn("stack-scope relative inline-flex h-9 items-center justify-center rounded-lg border border-black/[0.08] bg-zinc-100/70 p-1 text-muted-foreground dark:border-white/[0.10] dark:bg-zinc-900/45", className)}
+      onKeyDown={handleKeyDown}
       {...props}
     >
       {indicatorStyle != null && (