From f90907231b2cad8e766b58d1befedef1baf0b07c Mon Sep 17 00:00:00 2001
From: hitesh <hiteshchauhan.669@gmail.com>
Date: Sun, 12 Jan 2020 16:19:35 +0530
Subject: [PATCH] [feat]:Add helpertext=" " Resolves: #13646

---
 docs/pages/api/form-helper-text.md                   |  2 +-
 .../material-ui/src/FormHelperText/FormHelperText.js | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/docs/pages/api/form-helper-text.md b/docs/pages/api/form-helper-text.md
index ea4eff79c5b5bf..95d6fe979d8588 100644
--- a/docs/pages/api/form-helper-text.md
+++ b/docs/pages/api/form-helper-text.md
@@ -24,7 +24,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component.<br>If `' '` is provided, the component reserves one line height for displaying a future message. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'p'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> |  | If `true`, the helper text should be displayed in a disabled state. |
diff --git a/packages/material-ui/src/FormHelperText/FormHelperText.js b/packages/material-ui/src/FormHelperText/FormHelperText.js
index 94e73fc23d44fa..c0da0a8e9c397f 100644
--- a/packages/material-ui/src/FormHelperText/FormHelperText.js
+++ b/packages/material-ui/src/FormHelperText/FormHelperText.js
@@ -44,6 +44,7 @@ export const styles = theme => ({
 
 const FormHelperText = React.forwardRef(function FormHelperText(props, ref) {
   const {
+    children,
     classes,
     className,
     component: Component = 'p',
@@ -81,13 +82,22 @@ const FormHelperText = React.forwardRef(function FormHelperText(props, ref) {
       )}
       ref={ref}
       {...other}
-    />
+    >
+      {children === ' ' ? (
+        // eslint-disable-next-line react/no-danger
+        <span dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
+      ) : (
+        children
+      )}
+    </Component>
   );
 });
 
 FormHelperText.propTypes = {
   /**
    * The content of the component.
+   *
+   * If `' '` is provided, the component reserves one line height for displaying a future message.
    */
   children: PropTypes.node,
   /**