mirror of
https://github.com/stack-auth/stack.git
synced 2026-07-20 21:29:36 +08:00
fix: address remaining review comments — arrow-key nav, IME guard, test resilience
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
parent
4e1a15ff19
commit
7a7f1d27e0
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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");
|
||||
|
||||
@ -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");
|
||||
});
|
||||
});
|
||||
|
||||
@ -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 && (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user