diff --git a/web/frontend/app/features/auth/hooks/useRegisterWizard.ts b/web/frontend/app/features/auth/hooks/useRegisterWizard.ts index e38d6413..1706fb24 100644 --- a/web/frontend/app/features/auth/hooks/useRegisterWizard.ts +++ b/web/frontend/app/features/auth/hooks/useRegisterWizard.ts @@ -1,5 +1,5 @@ import { zodResolver } from '@hookform/resolvers/zod'; -import { useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import { useForm, type FieldErrors, type Resolver } from 'react-hook-form'; import { earliestStepForFields, lastRegisterStepIndex, registerSteps } from '../registerSteps'; import { registerSchema, type RegisterSchema } from '../schemas'; @@ -34,7 +34,7 @@ export const useRegisterWizard = (onValid: (values: RegisterSchema) => void) => return Object.keys(errors).length ? { values: {}, errors } : { values, errors: {} }; }; - const { register, handleSubmit, formState } = useForm({ + const { register, handleSubmit, formState, setFocus } = useForm({ resolver, mode: 'onTouched', }); @@ -56,6 +56,19 @@ export const useRegisterWizard = (onValid: (values: RegisterSchema) => void) => }, ); + // Move focus into each new step, which otherwise swaps out from under the + // keyboard while focus sits on the button that opened it. + const isInitialStep = useRef(true); + useEffect(() => { + if (isInitialStep.current) { + isInitialStep.current = false; + return; + } + + const [firstField] = registerSteps[stepIndex].fields; + if (firstField) setFocus(firstField); + }, [stepIndex, setFocus]); + return { step: stepIndex + 1, totalSteps: registerSteps.length,