diff --git a/studio/frontend/src/features/settings/settings-dialog.tsx b/studio/frontend/src/features/settings/settings-dialog.tsx index dbb106c1c0..376af06e9d 100644 --- a/studio/frontend/src/features/settings/settings-dialog.tsx +++ b/studio/frontend/src/features/settings/settings-dialog.tsx @@ -19,6 +19,7 @@ import { } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { motion, useReducedMotion } from "motion/react"; +import { useEffect, useRef } from "react"; import { useSettingsDialogStore, type SettingsTab } from "./stores/settings-dialog-store"; import { AboutTab } from "./tabs/about-tab"; import { ApiKeysTab } from "./tabs/api-keys-tab"; @@ -66,6 +67,22 @@ export function SettingsDialog() { const setActiveTab = useSettingsDialogStore((s) => s.setActiveTab); const closeDialog = useSettingsDialogStore((s) => s.closeDialog); const reduced = useReducedMotion(); + const tabButtonRefs = useRef>({ + general: null, + profile: null, + appearance: null, + chat: null, + "api-keys": null, + about: null, + }); + + useEffect(() => { + if (!open) return; + const frame = window.requestAnimationFrame(() => { + tabButtonRefs.current[activeTab]?.focus({ preventScroll: true }); + }); + return () => window.cancelAnimationFrame(frame); + }, [open, activeTab]); return ( !o && closeDialog()}> @@ -91,6 +108,9 @@ export function SettingsDialog() { return (