Fix reserve spacing for error message in Joy

ilbrando · Jul 22, 2024 · 55d73c7 · 55d73c7
1 parent f2c1e95
commit 55d73c7
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/packages/simple-form-joy/src/components/form-control-wrapper/form-control-wrapper.tsx b/packages/simple-form-joy/src/components/form-control-wrapper/form-control-wrapper.tsx
@@ -17,11 +17,13 @@ export const FormControlWrapper = (props: FormControlWrapperProps) => {
 
   const { effectiveReserveSpaceForValidationMessage } = useJoyFormUtils(reserveSpaceForValidationMessage);
 
+  const showErrorMessage = hasValue(errorMessage) || effectiveReserveSpaceForValidationMessage;
+
   return (
     <FormControl size={size} error={hasValue(errorMessage)} required={isRequired} disabled={isDisabled}>
       {hasValue(label) && <FormLabel>{label}</FormLabel>}
       {children}
-      <FormHelperText>{errorMessage ?? (effectiveReserveSpaceForValidationMessage ? <>{"\u00A0"}</> : null)}</FormHelperText>
+      {showErrorMessage && <FormHelperText>{errorMessage ?? (effectiveReserveSpaceForValidationMessage ? <>{"\u00A0"}</> : null)}</FormHelperText>}
     </FormControl>
   );
 };