Width of TextField does not take label into account when no value

[klis87]

• 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 fullWidth is false, TextField should take label into account in width calculation. It does so but only when value is not empty. This is especially true for select mode, when initial width is super narrow.

Current Behavior 😯

Width is not calculated properly as explained above

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/create-react-app-qyeyc

Context 🔦

n/a

Your Environment 🌎

Tech	Version
Material-UI	v4.3.0
React	v16.8.6
Browser	Chrome 76.0.3809.87

[klis87]

I saw a similar issue here - #12255 - but I believe that this is not a duplicate because it shows issues even with short labels, especially for select

[oliviertassinari]

@klis87 I think that the root issue is the same, the label displays independently from the input element. You need to make sure that: 1. the input has its own size, 2. the label is smaller than the input.

[klis87]

@oliviertassinari thx for the answer. However, the problem is that I have autogenerated form with WYSIWIG content and I cannot predict labels. What I tried is to disable floating label for those inputs with

InputLabelProps={{
  shrink: true
}}

but then inputs are overlapping - https://codesandbox.io/s/create-react-app-qyeyc

Is this intended or this is another issue? If yes I could raise as a new one.

[oliviertassinari]

Then you probably need to truncate the label after x characters. I'm not aware of any better solution.

[klis87]

@oliviertassinari Ok I will think of sth. I am wondering about this shrink prop though. I checked the whole docs and it seems like shrink: true is simply not compatible with fullWidth: false, it is either a bug or a limitation which would be worth adding to the docs. If it is an issue, I can raise it in separate issue.

[klis87]

@oliviertassinari apologies for spamming you like that in this topic, but I checked this once more and it is not shrink issue, but select.

see https://codesandbox.io/s/create-react-app-qyeyc once again

it seems that there is sth wrong with TextField in select mode together with fullWidth: false, in example I gave you everything is fine when select is not set, but once you switch it to true, then overlapping starts to occur

again, I can raise it a a separate issue if this is a bug

[oliviertassinari]

This is the same underlying limitation. The label is rendered in a position absolute, it escape the rendering flow of your page.

[klis87]

This I understand, but why it breaks in select mode only? This is text input in both cases, the only difference is that select has dropdown opening on click and it is not editable, but the rest should be the same. Otherwise overlapping would occur when select=false too

[klis87]

Notice that in example I gave you I set shrink to true which actually causes input width to be dependent on label length. The only problem is overlapping between separate inputs, with shrink: true and fullWidth: false input width is calculated correctly.

[oliviertassinari]

I don't understand, they all look broken.

[klis87]

@oliviertassinari hmm, I will just send you pictures, so it will more more clear.

[oliviertassinari]

Again: #16847 (comment)

[klis87]

I hope you are not starting to get frustrated, pls bear with me ;)

Just please explain to me why 1st image is fine and 2nd image is not fine, the only difference is select prop, labels are the same, for 1st image there is no overlapping, for 2nd there is, once I understand this I won't bother you anymore :)

[oliviertassinari]

@klis87 The label doesn't impact the layout, the input does. The <input> and <select> elements have different default width. You need to make sure the input is larger than the label.

[klis87]

@oliviertassinari now I get it, indeed for even longer label it does not work even when select: false, default width is the only difference after all. Thanks for explanation and... your patience :)

[oliviertassinari]

@klis87 I'm wondering how we could document this limitation.

[oliviertassinari]

Oh, here https://material-ui.com/components/text-fields/#limitations :)

[klis87]

@oliviertassinari I saw this but I think that this is sth else than label position limitation (especially that shrink: true does not help). I think it would be worth adding also another limitation, that label is positioned absolutely like you mentioned and that input width is independent on label width, which is especially important when fullWidth: false.
Also your comment You need to make sure the input is larger than the label. is very helpful to understand this limitation more.

[oliviertassinari]

Agree.