diff --git a/app/client/hooks/use-scroll-to-form-error.ts b/app/client/hooks/use-scroll-to-form-error.ts new file mode 100644 index 00000000..2e5ebc67 --- /dev/null +++ b/app/client/hooks/use-scroll-to-form-error.ts @@ -0,0 +1,10 @@ +import { useCallback } from "react"; + +export function useScrollToFormError() { + return useCallback(() => { + setTimeout(() => { + const firstError = document.querySelector("[data-slot='form-message']"); + firstError?.scrollIntoView({ behavior: "smooth", block: "center" }); + }, 50); + }, []); +} diff --git a/app/client/modules/backups/components/create-schedule-form/index.tsx b/app/client/modules/backups/components/create-schedule-form/index.tsx index 21007ca7..a760323c 100644 --- a/app/client/modules/backups/components/create-schedule-form/index.tsx +++ b/app/client/modules/backups/components/create-schedule-form/index.tsx @@ -1,6 +1,7 @@ import { arktypeResolver } from "@hookform/resolvers/arktype"; import { useCallback, useState } from "react"; import { useForm } from "react-hook-form"; +import { useScrollToFormError } from "~/client/hooks/use-scroll-to-form-error"; import { Form } from "~/client/components/ui/form"; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/client/components/ui/card"; import type { BackupSchedule, Volume } from "~/client/lib/types"; @@ -30,6 +31,8 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }: defaultValues: backupScheduleToFormValues(initialValues), }); + const scrollToFirstError = useScrollToFormError(); + const handleSubmit = useCallback( (data: InternalFormValues) => { const { @@ -100,7 +103,7 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }: return (