[TextField] Outlined label overlaps by border

[dchebakov]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

If outlined input initially was hidden (for example by css) and then appear, then label being overlaps by border.

Steps to Reproduce 🕹

1. Open codesandbox example
2. Increase the width of the preview window to input appear
3. Try input something

[oliviertassinari]

@dchebakov How did you spot this issue (in which context)?

[dchebakov]

@oliviertassinari I have search bar (at the header of my website), which appear only on large displays.

[oliviertassinari]

@dchebakov We have tried a solution in #17680 but it's unclear if it will land. I can advise you to only render the textfield when visible or to change the key when the visible state changes.

[paaacman]

We have the same issue.
The fieldset > legend tag width doesn't change.
With @material-ui/core@4.4.3

[mattsrobot]

Also having this issue inside a dialog.

[stevefrenzel]

I'm having a similar issue with the Select component.

Referring to the demo for multiple selects, the variant prop with a value of 'outlined' ONLY works when removing the input prop entirely.

Also it doesn't display 100% correctly until the FormControl component receives the variant prop with a value of 'outlined' as well.

After doing this the label will go up, but will be covered by the border of the outline.

Would be great to have a label prop for the Select component as well, as it's working like a charm with the TextField component.

[oliviertassinari]

I'm closing as a duplicate of #17355