Open anilmenawat opened 4 months ago
FormMessage displays either an error message or it's children.
Since you're using zod you should put the translation in the schema definition and leave
You might have to get the translation in a Server component first, and then pass it to the component with the form and define the schema there.
That's what I found, at least.
const FormMessage = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
const { error, formMessageId } = useFormField()
const body = error ? String(error?.message) : children
its wrong it displays error before children, must be the other way around
Describe the bug
When passing a translation key to FormMessage like:
<FormMessage>{t(key)}</FormMessage>
it displays the key and not the appropriate translation. Replacing it with<span>{t(key)}</span>
works just fine.Affected component/components
Form
How to reproduce
Codesandbox/StackBlitz link
No response
Logs
No response
System Info
Before submitting