Outlined text field shows line through label

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When the TextField or Select renders with input in it, the label is rendered above the input and the line moves away.

Current Behavior

The label does move up, but the line remains, going through the text.

Steps to Reproduce

I am unable to reproduce this issue consistently. It does happen the majority of the time in the project I’m working. The outline does update as soon as interaction has taken place with the page like clicking on an element, opening a dropdown, etc. or anything that manipulates the state of the current component.

I’ve seen this happen in v3.2.x, I have never used the variant="outline" in prior versions so am unaware if this bug existed prior to v3.2.

Link: https://codesandbox.io/s/q361rzjpy4

Context

N/A

Your Environment

Tech	Version
Material-UI	v3.2.x
React	v16.5
Browser	Edge, Firefox, Chrome

[oliviertassinari]

It seems that the TabPanel demos we have are a common source of the observation of the problem. In this context, I would propose the following diff in the demos:

diff --git a/docs/src/pages/components/tabs/SimpleTabs.js b/docs/src/pages/components/tabs/SimpleTabs.js
index 02e6d8ce3..0ce8c959d 100644
--- a/docs/src/pages/components/tabs/SimpleTabs.js
+++ b/docs/src/pages/components/tabs/SimpleTabs.js
@@ -19,7 +19,7 @@ function TabPanel(props) {
       aria-labelledby={`simple-tab-${index}`}
       {...other}
     >
-      <Box p={3}>{children}</Box>
+      {value === index ? <Box p={3}>{children}</Box> : null}
     </Typography>
   );
 }

It would also help with performance, as only rendering the visible nodes, at least, until React improves the handling of hidden. cc @mbrookes and @eps1lon.

[rikku28]

Hello, I have this bug too and I don’t find how to solve it. It appeared on a form when I used tabs component (I took “simple tabs” example). <TabPanel value={value} index={0}> <ProductInfos selectedInfos={selectedInfos} onChange={onChange} /> </TabPanel> <TabPanel value={value} index={1}> <OrderInfos selectedInfos={selectedInfos} onChange={onChange} /> </TabPanel> <TabPanel value={value} index={2}> <SupplierInfos selectedInfos={selectedInfos} /> </TabPanel> The form displayed by <ProductInfos /> is good, the render of <TextField> is ok. But this isn’t good in the 2 other tabs. I have the same problem with <TextField> labels’ as discribed above, for my forms displayed by <SupplierInfos /> and <OrderInfos />. Is there a temporary solution to fix it and make labels override the outlined borders?

Sorry for my bad english and thanks in advance for help.