Material: input-container(select): label is not displayed when placeholder is specified and no selection has been made

[rvarbanov]

Actual Behavior:

• What is the issue? * When you add a placeholder to a md-select that already has a label, the label does not behave as expected.
• What is the expected behavior? If you have a md-select with a label and a placeholder, those should act like the angular material inputs. The label text is floating on top of the placeholder text and stays there after the user fills the input field with text. The same should be true for the select dropdown. The label text is floating on top of the placeholder text and stays there after the user selects one of the select dropdown options.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://codepen.io/radi/pen/JbBbPG
• Details: Read expected behavior above.

Angular Versions: *

• Angular Version: 1.5.9
• Angular Material Version: 1.1.1

Additional Information:

• Browser Type: * Google Chrome
• Browser Version: * Vers ion 55.0.2883.75 (64-bit)
• OS: * macOS Sierra 10.12.1 (16B2555)
• Stack Traces: n/a

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[Sayene]

got the same problem with both safari and chrome on mac. looks like 'md-input-has-placeholder' is not correctly set. however CodePen linked above seems to work OK.

[rvarbanov]

The CodePen is not working for me. How it is working for you. Please explain.

[Sayene]

This is what is see rendered in your CP, and I believe this is OK

Here is the problem with some of my code where label overlaps placeholder as 'md-input-has-placeholder' is not set to md-input-container

As we have mixed experience with this it might be sync/timing issue ...need to check how /md-input-has-placeholder' is set.

[rvarbanov]

Your screenshot is showing the issue. The dropdown should have the label "State" above the "Select a state" placeholder. Just like we have the label "Street Name" above the "123 Street" placeholder.

[Sayene]

Oh, sorry then, I've missed the select label. You're right, select label should be visible above when there is no value selected yet and both label and placeholder are set. And I can confirm it's not visible, as you described. My issue (label overlapping with placeholder) is another issue that may or may not be related.

[Splaktar]

I can confirm that the label should be shown floating if a placeholder is defined as well. I updated the CodePen to 1.1.10 (and now HEAD) to verify that this is still an issue.

For reference, I created another CodePen that demonstrates using both labels and placeholders together (which is recommended).