[TextField] Fix required outlined label space with no asterisk (#20715)

mui · Apr 23, 2020 · e4e1d4e · e4e1d4e
1 parent 79a29f5
commit e4e1d4e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/packages/material-ui/src/TextField/TextField.js b/packages/material-ui/src/TextField/TextField.js
@@ -107,10 +107,11 @@ const TextField = React.forwardRef(function TextField(props, ref) {
       InputMore.notched = InputLabelProps.shrink;
     }
     if (label) {
+      const displayRequired = InputLabelProps?.required ?? required;
       InputMore.label = (
         <React.Fragment>
           {label}
-          {required && '\u00a0*'}
+          {displayRequired && '\u00a0*'}
         </React.Fragment>
       );
     }

diff --git a/test/regressions/tests/TextField/OutlinedHiddenRequiredIndicator.js b/test/regressions/tests/TextField/OutlinedHiddenRequiredIndicator.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import TextField from '@material-ui/core/TextField';
+
+export default function OutlinedHiddenRequiredIndicator() {
+  return (
+    <TextField
+      label="Name"
+      variant="outlined"
+      required
+      InputLabelProps={{
+        shrink: true,
+        required: false,
+      }}
+    />
+  );
+}