Material-ui: Outlined text field shows line through label

[Studio384]

• [x] This is not a v0.x issue.
• [x] 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]

@Studio384 We would love to have a way to consistently reproduce the issue. It's very hard to work on this type of issue without.

[Studio384]

The code sandbox does reproduce it most often in Edge 18y. Other browsers appear to be less consistent in reproducing the issue or are only showing it for a short time (Chrome) before updating the view again to move the line away from the label. I'll try making a case where it is reproduceable in more browsers more consistently but I'm not sure how.

[oliviertassinari]

I'm closing for #13297. I could reproduce the issue on Edge. The issue disappears as soon as I hover the input. It's a rendering glitch

[Studio384]

It's not the same issue as #13297. In Firefox you have to interact with the page for it to go away and when you do it will animate the line (which shouldn't happen if this was a rendering glitch).

[Resumane]

Outline text field look terrible in Firefox but working in Chrome. When clicking the textfield in Chrome there's also a color change, not happening in Firefox.

[theRealEmu]

Hi, I've had this issue too. It occured whenever I changed the label of the Textfield dymically at runtime (I needed to switch languages).
I would write the new label to state, and even though the Textfield showed the new label, it didn't update the outline. However it updated the outline once a rerender was triggered anywhere else.

So in my case I had a function to merge my new labels into current state. My solution was to promisify this function and then force an update. I think this is very ugly, but not as much as the linethroughs ;)

I did:

let update = new Promise((resolve, reject)=>{ this.setState(state => ({ formFields: currentStateFormFields }), resolve(true) ) });

update.then(result =>{ if(result) { this.forceUpdate(); } else { throw new Error("MERGING LANGUAGE FAILED"); } })

[JanKaifer]

Fixed in v4.4.0: https://codesandbox.io/s/material-ui-text-field-bug-m4ujq.
-- credits to @oliviertassinari

[nicovalencia]

This does not appear to be fully fixed on v4.4.0.

[danielo515]

I'm having the same problem the original poster explained. I mean, this happens when any change to the state that contains the field is done. Re-rendering the field by changing any of its properties makes this problem disappear, but I'm not sure how to "force" such thing.

[joshwooding]

@danielo515 You could update the key, which would cause a re-render of the component.

[danielo515]

@danielo515 You could update the key, which would cause a re-render of the component.

Yes, that is what I ended doing. Thanks for your answer in any case.

[oliviertassinari]

Does anyone has a reproduction?

[danielo515]

It is tricky to reproduce. Can't say what triggers it. For example on my case it only happens on 2 out of 3 elements in the same parent component. The only difference is that those two are inline while the other is full width.

[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 is good, the render of is ok. But this isn't good in the 2 other tabs. I have the same problem with labels' as discribed above, for my forms displayed by and .
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.

[oliviertassinari]

@rikku28 This sounds like a the exact same concern as of #17355.

[oliviertassinari]

@rikku28 This sounds like a duplicate of #17355.

[dnavamosler]

Hola,
también tengo este error y no encuentro cómo solucionarlo. Apareció en un formulario cuando utilicé el componente de pestañas (tomé el ejemplo de "pestañas simples").
<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>
El formulario que se muestra es bueno, el renderizado es correcto. Pero esto no es bueno en las otras 2 pestañas. Tengo el mismo problema con las etiquetas 'como se describe anteriormente, para mis formularios mostrados por y.
¿Existe una solución temporal para arreglarlo y hacer que las etiquetas anulen los bordes delineados?

Perdón por mi mal inglés y gracias de antemano por la ayuda.

I have exactly this problem, I have tried many things without obtaining an effective result ... I have even copied the form of the first Tab and this happens ...

[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]

@oliviertassinari Thanks for the help. That's working now, with this modification. :)
Best regards

[giovanniantonaccio]

@oliviertassinari thank you very much for this! Solved the problem here for me!