diff --git a/src/components/mental-health/check-in-wizard.tsx b/src/components/mental-health/check-in-wizard.tsx index 75a832828..ce8d91891 100644 --- a/src/components/mental-health/check-in-wizard.tsx +++ b/src/components/mental-health/check-in-wizard.tsx @@ -67,6 +67,18 @@ interface StepWording { lang: string; } +/** + * Each step focuses its question. The first step's question exists only once + * the wording's chunk has loaded, so the focus also follows that. + */ +function useStepFocus(step: number, hasWording: boolean) { + const headingRef = useRef(null); + useEffect(() => { + headingRef.current?.focus({ preventScroll: false }); + }, [step, hasWording]); + return headingRef; +} + export function CheckInWizard({ instrument, onSubmit, @@ -99,10 +111,7 @@ export function CheckInWizard({ const onFunctional = step === steps.functionalStep; const questionIndex = step - 1; - const headingRef = useRef(null); - useEffect(() => { - headingRef.current?.focus({ preventScroll: false }); - }, [step]); + const headingRef = useStepFocus(step, Boolean(wording)); function advance() { if (fromReview && isComplete(items)) {