Matt
ec6f90f335
Two new building blocks for the platform-wide form-error UX rework.
Expense form adopts both as the validation that the pattern works
before the broader sweep across the ~29 useForm callers.
- `useFormScrollToError(handleSubmit, errors)` — wraps RHF's
handleSubmit. On validation failure it locates the first errored
field via `[name="..."]` (or id fallback), walks ancestors to find
the nearest scrolling container (key for forms inside Sheet /
Dialog bodies that own their own overflow-y), and
scrollTo({ behavior: 'smooth' }) + focus({ preventScroll }) on it.
Type-loose handleSubmit signature so 2-arg and 3-arg useForm()
callers (input vs transformed types) both work.
- `<FormErrorSummary errors={errors} labels={…}>` — top-of-form alert
banner listing each failed field as a clickable anchor. Renders
only when ≥2 errors (single-error case is handled by the hook
alone). role="alert" aria-live="polite" for SR users.
- expense-form-dialog adopts both: `onSubmitWithScroll(onSubmit)`
replaces the bare `handleSubmit(onSubmit)`, plus a labelled
`<FormErrorSummary>` at the top of the form. Closes the loop on
the silent-no-op zod-refine bug fixed in PR1 (the underlying
setValue() fix already routes errors through formState; this
surfaces them visibly).
tsc clean. 1419/1419 vitest pass.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
91 lines
3.6 KiB
TypeScript
91 lines
3.6 KiB
TypeScript
'use client';
|
|
|
|
import { useCallback } from 'react';
|
|
import type { FieldErrors, FieldValues } from 'react-hook-form';
|
|
|
|
// react-hook-form's handleSubmit is generic across the input vs.
|
|
// transformed types. We don't need the strictness here — the wrapper
|
|
// just passes its handler through to whatever handleSubmit the caller
|
|
// gave us. Use a loose type so 2-arg and 3-arg useForm() both work.
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
type AnyHandleSubmit = (
|
|
onValid: any,
|
|
onInvalid?: any,
|
|
) => (e?: React.BaseSyntheticEvent) => Promise<void>;
|
|
|
|
/**
|
|
* Find the nearest scrolling ancestor of a node — accounts for the
|
|
* common case of forms rendered inside a Sheet / Dialog body that owns
|
|
* its own overflow-y. Falls back to `window` when no ancestor scrolls.
|
|
*/
|
|
function findScrollContainer(el: HTMLElement | null): HTMLElement | null {
|
|
let cur: HTMLElement | null = el?.parentElement ?? null;
|
|
while (cur) {
|
|
const style = window.getComputedStyle(cur);
|
|
const overflowY = style.overflowY;
|
|
if ((overflowY === 'auto' || overflowY === 'scroll') && cur.scrollHeight > cur.clientHeight) {
|
|
return cur;
|
|
}
|
|
cur = cur.parentElement;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
/**
|
|
* Wrap react-hook-form's `handleSubmit` so validation failures scroll
|
|
* the first errored field into view and focus it. Critical on tall
|
|
* drawers / dialogs where the failing field is below the fold —
|
|
* without this the user is dropped at the top of the form with no
|
|
* indication of what failed.
|
|
*
|
|
* Usage:
|
|
* ```
|
|
* const { handleSubmit, formState: { errors }, ... } = useForm(...);
|
|
* const onSubmit = useFormScrollToError(handleSubmit, errors);
|
|
* <form onSubmit={onSubmit(myHandler)}>...</form>
|
|
* ```
|
|
*
|
|
* `errors` is taken from `formState` so the hook reads the FIRST key
|
|
* (insertion order matches field render order in practice).
|
|
*/
|
|
export function useFormScrollToError<TFieldValues extends FieldValues>(
|
|
handleSubmit: AnyHandleSubmit,
|
|
errors: FieldErrors<TFieldValues>,
|
|
) {
|
|
return useCallback(
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
(onValid: (data: any) => void | Promise<void>) => {
|
|
return handleSubmit(onValid, () => {
|
|
// react-hook-form calls this on validation failure. We already
|
|
// have `errors` from formState — read the first key and scroll
|
|
// its DOM node into view.
|
|
const firstName = Object.keys(errors)[0];
|
|
if (!firstName) return;
|
|
// Find by `name` first (most input components forward `name`
|
|
// from `register`), then by `id` (fallback for custom Inputs).
|
|
const node =
|
|
(document.querySelector(`[name="${firstName}"]`) as HTMLElement | null) ??
|
|
(document.getElementById(firstName) as HTMLElement | null);
|
|
if (!node) return;
|
|
const container = findScrollContainer(node);
|
|
if (container) {
|
|
// Manually compute position so we scroll inside the
|
|
// container, not the page.
|
|
const cRect = container.getBoundingClientRect();
|
|
const nRect = node.getBoundingClientRect();
|
|
const offset = nRect.top - cRect.top + container.scrollTop - cRect.height / 2;
|
|
container.scrollTo({ top: offset, behavior: 'smooth' });
|
|
} else {
|
|
node.scrollIntoView({ block: 'center', behavior: 'smooth' });
|
|
}
|
|
if (typeof node.focus === 'function') {
|
|
// Defer focus until after the smooth scroll has started so
|
|
// the focus ring is visible.
|
|
window.setTimeout(() => node.focus({ preventScroll: true }), 50);
|
|
}
|
|
});
|
|
},
|
|
[handleSubmit, errors],
|
|
);
|
|
}
|