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) => { - 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) => { + const container = containerRef.current; + if (container == null) { + return; + } + const tabs = Array.from(container.querySelectorAll('[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 (
{indicatorStyle != null && (