Deprecate md-select-label

[rschmukler]

We used to allow people to customize what a select would show as the value when it was selected. This is bad UX as it can lead to a user thinking that was is selected is not what they clicked on.

We should follow the HTML native select's behavior of using the option.textContent as the display value for the label. placeholder can be used for when no value is selected (as it currently, hopefully is).

[Anthropic]

In the Material spec there is an option to have additional label text with it's own design rules so that both can be shown without overriding the display of the value.
http://www.google.com/design/spec/components/menus.html#menus-simple-menus

That would be the preferred behavioural outcome for my projects.

[bshir]

Hello,
I think that this update has taken away desired functionality from the md-select directive. There are cases where customizing the select options could be considered an improvement to the UX. Opinions may vary.
Examples...
a select element containing color selections with the color displayed beside the hex code (see pen below).
a select element which formats each option text in a different color (red, yellow, green)

Is there a way to configure this with 10.1? I'm currently able to do options with custom markup (as before) but unable to maintain consistency with the selected option since md-select-label has been removed. This creates the inconsistent UX.

It's entirely possible that I'm missing something here. Let me know if anything here requires clarification. Thanks

Here's a modification from a demo codepen demonstrating the behavior: http://codepen.io/anon/pen/rVbLOm

[JobaDiniz]

What about when you use md-optgroup? The md-option can have the same text among different md-optgroup and this will confuse users.

<md-select ng-model="vm.event.agenda" class="event-agenda">
                        <md-optgroup label="{{group.name}}" ng-repeat="group in vm.groupedAgendas">
                            <md-option ng-value="agenda.id" ng-repeat="agenda in group.agendas">{{agenda.name}}</md-option>
                        </md-optgroup>
                    </md-select>

The selected text in my case should be: group.name - agenda.name

How to accomplish that?

[rishabhmhjn]

+1

md-select-label should be included