Text input with label and placeholder issues

[robert-figshare]

Problem description

If you set a multiline TextInput with placeholder and label, both will be visible and overlapped
If you set a TextInput with multiline={false} and InputLabelProps={ { shrink: true } }, The placeholder will be displayed only on focus

Steps to reproduce

You can find the configurations here.
https://www.webpackbin.com/bins/-KrocGNyPTqG5mMTl4q6

Versions

• Material-UI: beta-5
• React: 15.4.2
• Browser: Chrome

[oliviertassinari]

It could be an higher order Component issue, where the parent component doesn't have access the the textarea value. I'm just guessing. I haven't looked into it.

[robert-figshare]

After this update, when using { shrink: true } the placeholder is broken in every case. It only appears when focusing the input.
https://www.webpackbin.com/bins/-KrocGNyPTqG5mMTl4q6
Is there any way to use skrink label with a placeholder?

[oliviertassinari]

@robert-figshare I do think that it's different. It's a feature this time. I guess we could add a property like alwaysDisplayPlaceholder or think of a smarter way to handle the shrink state with the focus state.

[robert-figshare]

It just looks really weird, you have an empty input, no placeholder. When you click the input the placeholder appears.
When you add shrink: true to the label, it become fixed above the input. It looks normal for me that, if the label is fixed, the placeholder should always appear.

label:not(.shrinked) + $formControl & { opacity: 0.5 }

[oliviertassinari]

Yes, it's weird. My fixes what about making the single and multi lignes mode working the same.

[Floriferous]

I'm experiencing this, should we reopen the issue?

[oliviertassinari]

@Floriferous Please open a new issue with more detail :)