search

angular / material

Material design for AngularJS
https://material.angularjs.org/
MIT License
16.54k stars 3.39k forks source link

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

Open ewahner opened 3 years ago

ewahner commented 3 years ago

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

Add anything else we should know

Stack Trace

Screenshots

Splaktar commented 3 years ago

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 commented 3 years ago

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.