select: label not visible when using md-selected-text

[ewahner]

AngularJS Material is in LTS mode

We are no longer accepting changes that are not critical bug fixes into this project. See Long Term Support for more detail.

Bug Report

If you use md-selected-text on an md-select with a label, the label will not appear until a value has been selected.

Demo and steps to reproduce the issue

This blank StackBlitz demo can be used to create a reproduction that demonstrates your issue.

https://codepen.io/ewahner/pen/MWJPXJJ

Detailed Reproduction Steps

1. Use md-selected-text on an md-select
2. Use a label inside a md-input-container

Explain the expected behavior

The label should appear as a placeholder.

Explain the current behavior

The label is not visible until a value has been selected.

Discuss the use-case or motivation for changing the existing behavior

Feels broken

List the affected versions of AngularJS, Material, OS, and browsers

• AngularJS: 1.8.2
• AngularJS Material: 1.2.2
• OS:
• Browsers:
• Screen Readers:

Add anything else we should know

Stack Trace

Screenshots

[Splaktar]

From the docs:

Expression to be evaluated that will return a string to be displayed as a placeholder in the select input box when it is closed.

The placeholder value depends on what your md-selected-text expression evaluates to.

Here's an example that sets the placeholder to State when the value is '' or 'None': https://codepen.io/Splaktar/pen/NWdmbVE?editors=1010

[ewahner]

I am not sure if that explains the behavior of the LABEL tag not working. I completely understand how to use the md-selected-text. I was trying to illustrate that if you use the md-selected-text and a label inside a md-input-container the label will not work. If it was designed that way, then I would say it was probably designed wrong.