Merge pull request #4390 from marmelab/fix-filter-form-layout

Fix FilterForm layout broken by bottom margin on Inputs
marmelab · Feb 5, 2020 · 27213bc · 27213bc
2 parents 740b9b6 + 9650257
commit 27213bc
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/packages/ra-ui-materialui/src/input/InputHelperText.tsx b/packages/ra-ui-materialui/src/input/InputHelperText.tsx
@@ -2,7 +2,7 @@ import React, { FunctionComponent } from 'react';
 import { useTranslate, ValidationError, ValidationErrorMessage } from 'ra-core';
 
 interface Props {
-    helperText?: string;
+    helperText?: string | boolean;
     error?: ValidationErrorMessage;
     touched: boolean;
 }
@@ -16,17 +16,17 @@ const InputHelperText: FunctionComponent<Props> = ({
 
     return touched && error ? (
         <ValidationError error={error} />
-    ) : helperText ? (
+    ) : typeof helperText === 'string' ? (
         <>{translate(helperText, { _: helperText })}</>
-    ) : (
+    ) : helperText !== false ? (
         // material-ui's HelperText cannot reserve space unless we pass a single
         // space as child, which isn't possible when the child is a component.
         // Therefore, we must reserve the space ourselves by passing the same
         // markup as material-ui.
         // @see https://github.com/mui-org/material-ui/blob/62e439b7022d519ab638d65201e204b59b77f8da/packages/material-ui/src/FormHelperText/FormHelperText.js#L85-L90
         // eslint-disable-next-line react/no-danger
         <span dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
-    );
+    ) : null;
 };
 
 export default InputHelperText;
diff --git a/packages/ra-ui-materialui/src/list/FilterFormInput.js b/packages/ra-ui-materialui/src/list/FilterFormInput.js
@@ -48,6 +48,7 @@ const FilterFormInput = ({
                 record: emptyRecord,
                 variant,
                 margin,
+                helperText: false,
             })}
             <div className={classes.spacer}>&nbsp;</div>
         </div>