[TextField] Fix outlined render gap if label = empty string (#19722)

mui · Mar 1, 2020 · e6e329f · e6e329f
1 parent a698407
commit e6e329f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/packages/material-ui/src/TextField/TextField.js b/packages/material-ui/src/TextField/TextField.js
@@ -106,15 +106,14 @@ const TextField = React.forwardRef(function TextField(props, ref) {
     if (InputLabelProps && typeof InputLabelProps.shrink !== 'undefined') {
       InputMore.notched = InputLabelProps.shrink;
     }
-
-    InputMore.label = label ? (
-      <React.Fragment>
-        {label}
-        {required && '\u00a0*'}
-      </React.Fragment>
-    ) : (
-      label
-    );
+    if (label) {
+      InputMore.label = (
+        <React.Fragment>
+          {label}
+          {required && '\u00a0*'}
+        </React.Fragment>
+      );
+    }
   }
   if (select) {
     // unset defaults from textbox inputs

diff --git a/packages/material-ui/src/TextField/TextField.test.js b/packages/material-ui/src/TextField/TextField.test.js
@@ -62,6 +62,14 @@ describe('<TextField />', () => {
 
       expect(container.querySelector('label')).to.have.class('foo');
     });
+
+    ['', undefined].forEach(label => {
+      it(`should not render empty (${label}) label element`, () => {
+        const { container } = render(<TextField id="labelled" label={label} />);
+
+        expect(container.querySelector('label')).to.be.null;
+      });
+    });
   });
 
   describe('with a helper text', () => {