diff --git a/canvas/src/components/MissingKeysModal.tsx b/canvas/src/components/MissingKeysModal.tsx index 2c2a648e..e6712177 100644 --- a/canvas/src/components/MissingKeysModal.tsx +++ b/canvas/src/components/MissingKeysModal.tsx @@ -387,7 +387,6 @@ function AllKeysModal({ }) { const [entries, setEntries] = useState([]); const [globalError, setGlobalError] = useState(null); - const firstInputRef = useRef(null); useEffect(() => { if (!open) return; @@ -403,12 +402,6 @@ function AllKeysModal({ setGlobalError(null); }, [open, missingKeys]); - useEffect(() => { - if (!open) return; - const raf = requestAnimationFrame(() => firstInputRef.current?.focus()); - return () => cancelAnimationFrame(raf); - }, [open]); - useEffect(() => { if (!open) return; const handler = (e: KeyboardEvent) => { @@ -471,6 +464,15 @@ function AllKeysModal({ onKeysAdded(); }, [entries, onKeysAdded]); + // Focus trap: auto-focus first input when modal opens + useEffect(() => { + if (!open) return; + const timer = requestAnimationFrame(() => { + document.getElementById("missing-keys-title")?.focus(); + }); + return () => cancelAnimationFrame(timer); + }, [open]); + if (!open) return null; const allSaved = entries.length > 0 && entries.every((e) => e.saved); @@ -482,8 +484,8 @@ function AllKeysModal({ return (
{entry.saved && ( -