Material-ui: [TextField] Outlined input cause scrollabar

[zekehernandez]

For the outlined TextField (at least), if the label for the input has multiple words particularly, the hidden legend element can be taller than the actual input itself, which can cause layout issues.

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

Current Behavior 😯

If the label for the TextField is long enough and has enough words (line breaks) the span inside of the legend element will have a height taller than the input.

Expected Behavior 🤔

The length of the label should have no impact on the height of the TextField component.
This behavior wasn't the case in 4.4.0

Steps to Reproduce 🕹

Steps:

1. Visit the TextField CodeSandbox: https://codesandbox.io/s/material-demo-75vf4
2. Set the label of the Outlined TextField to "Outlined and Very Long"
3. Inspect the span inside the legend using Dev Tools
4. See how the span is taller than the TextField now

Context 🔦

This behavior is not a problem in the CodeSandbox, but it is causing one of my Dialog forms to overflow when it shouldn't. Obviously I can work around this by adding a margin or whatever, but that's not ideal.

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.9.0 |
| React | v 16.9.0 |
| Browser | Chrome |
| TypeScript | no |
| etc. | |

[HenrySiau]

Can not re-produce this issue
CodeSandbox: https://codesandbox.io/s/material-demo-0t93e
Chrome Browser version: 80.0.3987.132 (Official Build) (64-bit)

[zekehernandez]

Hi @HenrySiau, the input element wasn't the wrong size, it's the span inside of the legend element.

[oliviertassinari]

@zekehernandez Do you have an example (reproduction) of where it can cause an issue?

[zekehernandez]

@oliviertassinari, I'll get an example up as soon as I can.

[zekehernandez]

Okay, @oliviertassinari here is a small demo: https://codesandbox.io/s/material-demo-f5qv0
As the code stands in there, everything looks fine. But if you change the label to "Outlined but very long" the Dialog Content is now too long for its container and a scrollbar appears.

Like I said before, it is a pretty minor thing, and easy to work around; but it appears to be a regression as it didn't behave this way in v4.4.0, that's why I even brought it up in the first place.

Here's a GIF of it in action:

[oliviertassinari]

@zekehernandez What do you think of this patch? Do you want to submit a pull request? :)

diff --git a/packages/material-ui/src/OutlinedInput/NotchedOutline.js b/packages/material-ui/src/OutlinedInput/NotchedOutline.js
index 93788512e..d8b17e91c 100644
--- a/packages/material-ui/src/OutlinedInput/NotchedOutline.js
+++ b/packages/material-ui/src/OutlinedInput/NotchedOutline.js
@@ -21,6 +21,7 @@ export const styles = theme => {
       borderRadius: 'inherit',
       borderStyle: 'solid',
       borderWidth: 1,
+      overflow: 'hidden',
     },
     /* Styles applied to the legend element when `labelWidth` is provided. */
     legend: {

[zekehernandez]

Oliver, looks great! I just confirmed real quick that the other Inputs didn't have the same issue. They don't. I'll submit a PR as soon as I can.

[Uzwername]

Seems like @zekehernandez has had quite a busy week :)

I'll create a pull request under an hour or so, but if @zekehernandez really want to do it, please let me know & I will work on something else :)

If there's already a pull for that, please, let me know also. I didn't find it.

[zekehernandez]

😅
Sure did haha. But more than that, I started to work on this and locally, after adding the suggested fix, it didn't appear to work. But by all means, give it a go! Thanks!

[Uzwername]

@zekehernandez Oh, great to know, thanks for the info.

Could you please tell me how did you test for such a visual bug? I haven't found any appropriate script in package.json to launch some visualization/demo page, though there certainly should be some & must be missing something.

I found that there's Karma configured to run in headless mode, but it doesn't help much in debugging.

[zekehernandez]

Yeah, check out Testing the Documentation Site in CONTRIBUTING.md. Basically I just ran the docs, and saw if I could reproduce it there.