[OutlinedInput] Fix offscreen label strikethrough

Author: eps1lon

docs/src/pages/components/tabs/SimpleTabs.js

@@ -4,6 +4,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
+import TextField from '@material-ui/core/TextField';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
 
@@ -62,13 +63,13 @@ export default function SimpleTabs() {
         </Tabs>
       </AppBar>
       <TabPanel value={value} index={0}>
-        Item One
+        <TextField label="dummy input" variant="outlined" />
       </TabPanel>
       <TabPanel value={value} index={1}>
         Item Two
       </TabPanel>
       <TabPanel value={value} index={2}>
-        Item Three
+        <TextField label="dummy input" variant="outlined" />
       </TabPanel>
     </div>
   );

docs/src/pages/components/text-fields/OutlinedTextFields.js

@@ -67,7 +67,6 @@ export default function OutlinedTextFields() {
       <TextField
         id="outlined-uncontrolled"
         label="Uncontrolled"
-        defaultValue="foo"
         className={classes.textField}
         margin="normal"
         variant="outlined"

packages/material-ui/src/OutlinedInput/NotchedOutline.js

@@ -33,10 +33,17 @@ export const styles = theme => {
       textAlign: 'left',
       padding: 0,
       lineHeight: '11px',
-      transition: theme.transitions.create('width', {
+      fontSize: '0.75rem',
+      maxWidth: 0,
+      transition: theme.transitions.create('max-width', {
         duration: theme.transitions.duration.shorter,
         easing: theme.transitions.easing.easeOut,
       }),
+      visibility: 'hidden',
+      '& span': {
+        paddingLeft: 4,
+        paddingRight: 6,
+      },
     },
   };
 };
@@ -49,6 +56,7 @@ const NotchedOutline = React.forwardRef(function NotchedOutline(props, ref) {
     children,
     classes,
     className,
+    label = '\u200B',
     labelWidth: labelWidthProp,
     notched,
     style,
@@ -62,25 +70,17 @@ const NotchedOutline = React.forwardRef(function NotchedOutline(props, ref) {
     <fieldset
       aria-hidden
       style={{
-        [`padding${capitalize(align)}`]: 8 + (notched ? 0 : labelWidth / 2),
+        [`padding${capitalize(align)}`]: 8,
         ...style,
       }}
       className={clsx(classes.root, className)}
       ref={ref}
       {...other}
     >
-      <legend
-        className={classes.legend}
-        style={{
-          // IE 11: fieldset with legend does not render
-          // a border radius. This maintains consistency
-          // by always having a legend rendered
-          width: notched ? labelWidth : 0.01,
-        }}
-      >
+      <legend className={classes.legend} style={{ maxWidth: notched ? '150px' : '0px' }}>
         {/* Use the nominal use case of the legend, avoid rendering artefacts. */}
         {/* eslint-disable-next-line react/no-danger */}
-        <span dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
+        <span>{label}</span>
       </legend>
     </fieldset>
   );

packages/material-ui/src/OutlinedInput/OutlinedInput.js

@@ -95,6 +95,7 @@ const OutlinedInput = React.forwardRef(function OutlinedInput(props, ref) {
     classes,
     fullWidth = false,
     inputComponent = 'input',
+    label,
     labelWidth = 0,
     multiline = false,
     notched,
@@ -107,6 +108,7 @@ const OutlinedInput = React.forwardRef(function OutlinedInput(props, ref) {
       renderSuffix={state => (
         <NotchedOutline
           className={classes.notchedOutline}
+          label={label}
           labelWidth={labelWidth}
           notched={
             typeof notched !== 'undefined'

packages/material-ui/src/TextField/TextField.js

@@ -116,6 +116,7 @@ const TextField = React.forwardRef(function TextField(props, ref) {
       InputMore.notched = InputLabelProps.shrink;
     }
 
+    InputMore.label = `${label}${required ? ' *' : ''}`;
     InputMore.labelWidth = labelWidth;
   }