What do you do for clearing useActionState/useFormState errors on typing?

[vadimshvetsov]

I was wondering if there is a recipe of clearing error messages from server actions on typing.
There is a short overview of current behaviour:

Action

const schema = z.object({
  email: z
    .string({ required_error: "Email is required" })
    .email("Invalid email")
    .refine(
      (email) => email !== "asd@asd.asd",
      "Email asd@asd.asd is occupied",
    ),
})

type FormPrevState =
  | { status: "draft" }
  | { status: "success"; message?: string }
  | {
      status: "error"
      message?: string
      errors?: Record<string, string[] | undefined>
    }

export async function requestLoginLink(
  _prevState: FormPrevState,
  formData: FormData,
): Promise<FormPrevState> {
  const validatedFields = schema.safeParse({ email: formData.get("email") })

  if (!validatedFields.success) {
    return {
      status: "error",
      message: "",
      errors: validatedFields.error.flatten().fieldErrors,
    }
  }
  
  // Sign In here and return server error or success
}

Form

export function EmailLoginForm() {
  const [state, formAction] = useFormState(requestLoginLink, {
    status: "draft",
  })

  const hasEmailError =
    !draft && state.status === "error" && !!state.errors?.email?.[0]
  const hasErrorMessage = !draft && state.status === "error" && !!state.message
  const hasSuccessMessage =
    !draft && state.status === "success" && !!state.message

  useEffect(() => {
    if (hasSuccessMessage) {
      toast(state.message)
    }

    if (hasErrorMessage) {
      toast(state.message)
    }
  }, [state, hasSuccessMessage, hasErrorMessage, toast])

  return (
    <form
      className={"flex flex-col items-stretch justify-center gap-2"}
      action={formAction}
    >
      <Input
        name="email"
        placeholder="Email"
        type="email"
        required
        className={cn({ ["border-destructive"]: hasEmailError })}
      />
      {hasEmailError && (
        <Typography variant="error">{state.errors?.email?.[0]}</Typography>
      )}
      <Button size="lg" type="submit" disabled={pending}>
        <WandSparkles className="mr-2 h-4 w-4" />
        Login with Email
      </Button>
      {(hasSuccessMessage || hasErrorMessage) && (
        <p aria-live="polite" className="sr-only" role="status">
          {state.message}
        </p>
      )}
    </form>
  )
}

So when I submit form with asd@asd.asd email which doesn't pass validation I see the error:

And when I changing email I still see the error for the last submission which is expected.

I want to clear this error message when I'm changing the form. So I didn't find the better way yet then just to add custom useFieldState hook but I'm still looking for better solution.
Form

function useFieldState(name: string): {
  dirty: boolean
  onChange: ChangeEventHandler
} {
  const { data, pending } = useFormStatus()
  const [dirty, setDirty] = useState(true)
  const [prevValue, setPrevValue] = useState<string>()

  useEffect(() => {
    const value = data && data.get(name)
    if (value && typeof value === "string") {
      setPrevValue(value)
    }
  }, [data, setDirty])

  useEffect(() => {
    if (!pending) {
      setDirty(true)
    }
    setDirty(false)
  }, [pending])

  function onChange(e: ChangeEvent<HTMLInputElement>): void {
    const { value } = e.target
    if (value === prevValue) {
      setDirty(false)
      return
    }
    setDirty(true)
  }

  return { dirty, onChange }
}

export function EmailField({
  error,
  ...props
}: { error?: string } & Partial<Parameters<typeof Input>[0]>) {
  const { dirty, onChange } = useFieldState("email")

  const hasError = !dirty && !!error

  return (
    <>
      <Input
        // ...
        className={cn({ ["border-destructive"]: hasError })}
        onChange={onChange}
        {...props}
      />
      {hasError && <Typography variant="error">{error}</Typography>}
    </>
  )
}

export function EmailLoginForm() {
  const [state, formAction] = useFormState(requestLoginLink, {
    status: "draft",
  })
  // ...
  return (
      {/* ... */}
      <EmailField
        error={state.status === "error" ? state.errors?.email?.[0] : ""}
      />
      {/* ... */}
  )
}

What do you think?

[vadimshvetsov]

Code above is not fully solving the good UX problem for me. There are cases when previous error message is shown for several ms until new error message will come and replace it. I didn't find a good way how to fix it with maintaining dirty state.

Finally I've ended up with this approach. It helps to control and clear error message when needed (ex: when form is submitting).

function useFieldError(
  name: string,
  error: string | undefined,
): {
  fieldError: string
  onChange: ChangeEventHandler
} {
  const { data, pending } = useFormStatus()
  const [prevValue, setPrevValue] = useState<string>()
  const [fieldError, setFieldError] = useState<string>(error ?? "")

  useEffect(() => {
    const value = data && data.get(name)
    if (value && typeof value === "string") {
      setPrevValue(value)
    }
  }, [data])

  useEffect(() => {
    if (pending) {
      setFieldError("")
    }
  }, [pending])

  useEffect(() => {
    if (error) {
      setFieldError(error)
    }
    // Error message might the same as previous one
  }, [data, error])

  function onChange(e: ChangeEvent<HTMLInputElement>): void {
    const { value } = e.target
    if (value === prevValue) {
      setFieldError(error ?? "")
      return
    }
    setFieldError("")
  }

  return { fieldError, onChange }
}

export function EmailField({
  error,
  ...props
}: { error?: string } & Partial<Parameters<typeof Input>[0]>) {
  const { pending } = useFormStatus()
  const { fieldError, onChange } = useFieldError("email", error)

  return (
    <>
      <Input
        name="email"
        placeholder="Email"
        type="email"
        disabled={pending}
        required
        className={cn({ ["border-destructive"]: fieldError })}
        onChange={onChange}
        {...props}
      />
      {fieldError && <Typography variant="error">{fieldError}</Typography>}
    </>
  )
}

Apreciate your ideas how to do it in a better way.