Merge pull request #10571 from marmelab/fix-helpertext-empty-string-handling

Fix helperText has wrong height when passing an empty string

Author: slax57

packages/ra-ui-materialui/src/input/InputHelperText.tsx

@@ -18,7 +18,7 @@ export const InputHelperText = (props: InputHelperTextProps) => {
         return helperText;
     }
 
-    if (typeof helperText === 'string') {
+    if (typeof helperText === 'string' && helperText.length > 0) {
         return <>{translate(helperText, { _: helperText })}</>;
     }
 

packages/ra-ui-materialui/src/input/TextInput.stories.tsx

@@ -89,17 +89,33 @@ export const DefaultValue = () => (
     </Wrapper>
 );
 
-export const HelperText = () => (
+export const HelperText = ({
+    helperText = 'Number of times the post was read',
+}: {
+    helperText: any;
+}) => (
     <Wrapper>
         <TextInput source="title" />
         <TextInput source="title" helperText={false} />
-        <TextInput
-            source="title"
-            helperText="Number of times the post was read"
-        />
+        <TextInput source="title" helperText={helperText} />
     </Wrapper>
 );
 
+HelperText.argTypes = {
+    helperText: {
+        options: ['text', 'false', 'empty string'],
+        mapping: {
+            text: 'Number of times the post was read',
+            false: false,
+            'empty string': '',
+        },
+        control: { type: 'select' },
+    },
+};
+HelperText.args = {
+    helperText: 'text',
+};
+
 export const Label = () => (
     <Wrapper>
         <TextInput source="title" />