[bug]: FormMessage with useTranslations from next-intl
Opened this issue · 2 comments
anilmenawat commented
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
- Build a standard nextjs project with create-next-app
- Create any form using shadcn ui Form component with FormMessage as shown above
- Add a translation table
- Enter an invalid email address in the form
- It will show the key instead of the translation
- Replace FormMessage with span and it will work fine.
Codesandbox/StackBlitz link
No response
Logs
No response
System Info
"next": "14.1.4",
"next-intl": "^3.9.5",
"react": "^18.2.0",
"zod": "^3.22.4”,
"@hookform/resolvers": "^3.3.4",
Before submitting
- I've made research efforts and searched the documentation
- I've searched for existing issues
Seryjnyy commented
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 as is.
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.
0-don commented
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