superRefine: Custom field error not shown when field not last updated / "ref" is undefined [zod v3/v4]

[stefan-girlich]

Version Number

5.2.2

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/recursing-dhawan-f692jl

Steps to reproduce

General

1. Set up a form and schema that uses ´.superRefine()´ to validate two or more related fields and applies a custom error to one field. Examples:
   • Passwords must match
   • Date must not be before/after other date
   • Date must be valid in relation to selected timezone
2. Enter values so that the validation error should be shown, but make sure that the last changed input field leading to the error is not the one supposed to show the error.
3. Result: The error is correctly detected, but missing the ref attribute which seems to cause it to not be shown.

Error from zodResolver with missing ref:

{
    message:  "Last name must not be shorter than last name"
    ref: undefined
    type: "custom"
}

Error when changing the target field last, with correctly set ref:

{
    message:  "Last name must not be shorter than last name"
    ref: <input />
    type: "custom"
}

Specific case

Check the Codesandbox link for a reproducible example with test cases and instructions.

Environment

The error is reproducible with both recent and older dependency configurations:

Recent (see Codesandbox)

"@hookform/resolvers": "5.2.2",
"react-hook-form": "7.4.1",
"zod": "4.1.13",

Older (local project)

"@hookform/resolvers": "3.4.2",
"react-hook-form": "7.56.3",
"zod": "3.23.8",

The issue of ref being undefined is mentioned in this discussion from 2022.

Expected behaviour

The detected error should be shown regardless of which input field has been updated last.

What browsers are you seeing the problem on?

Any.

Code of Conduct

• I agree to follow this project's Code of Conduct

[stefan-girlich]

My workaround for now is to explicitly trigger validation where necessary using a custom hook:

import { useEffect } from 'react'
import { Path, UseFormTrigger, UseFormWatch } from 'react-hook-form'

import useHasChanged from '@/common/ui/hooks/useHasChanged' // based on some "usePrevious" implementation

const useErrorResolverWorkaround = <T extends Record<string, any>>(
  watchedField: Path<T>,
  fieldToValidate: Path<T>,
  watch: UseFormWatch<T>,
  trigger: UseFormTrigger<T>
) => {
  const watchedFieldValue = watch(watchedField)
  const didWatchedFieldChange = useHasChanged(watchedFieldValue)
  useEffect(() => {
    if (didWatchedFieldChange) trigger(fieldToValidate)
  }, [didWatchedFieldChange, fieldToValidate, trigger])
}

export default useErrorResolverWorkaround

Usage:

useErrorResolverWorkaround('timezone', 'date', watch, trigger)