fix: allows root message display on FormFieldError (#559)

Author: ivan-dalmet

package.json

@@ -53,8 +53,8 @@
     "@faker-js/faker": "8.4.1",
     "@fontsource/inter": "5.0.19",
     "@hookform/resolvers": "3.9.0",
-    "@oslojs/crypto": "^1.0.1",
-    "@oslojs/encoding": "^1.1.0",
+    "@oslojs/crypto": "1.0.1",
+    "@oslojs/encoding": "1.1.0",
     "@prisma/client": "5.16.2",
     "@react-email/components": "0.0.21",
     "@react-email/render": "0.0.16",

pnpm-lock.yaml

@@ -54,8 +54,9 @@ const FormFieldErrorComponent = <
   }
 
   const error = get<FieldErrors<TFieldValues>>(errors, name);
+  const errorMessage = error?.root?.message ?? error?.message;
 
-  if (!error) {
+  if (!errorMessage) {
     return null;
   }
 
@@ -81,7 +82,7 @@ const FormFieldErrorComponent = <
     <SlideFade in offsetY={-6}>
       <Flex fontSize="sm" color="error.500" ref={ref} {...rest}>
         <Icon icon={LuAlertCircle} me="2" />
-        {!!error?.message && <span>{error.message}</span>}
+        <span>{errorMessage}</span>
       </Flex>
     </SlideFade>
   );