mat-select-trigger is invisible if value is undefined or null

[hsinyu-chen]

Bug, feature request, or proposal:

md-select-trigger is invisible if value is undefined or null
when MD_PLACEHOLDER_GLOBAL_OPTIONS set to { float: 'always' }(use to show field name)
i cant show 'All' or 'Please Select ... ' on the md-select

What is the expected behavior?

need a way to show hint text / empty option alternative text

What is the current behavior?

mat-select-trigger is invisible if value is undefined or null

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-vyqfqf

What is the use-case or motivation for changing an existing behavior?

use select as a list filter, or form control with a hint text

[crisbeto]

This is the intended behavior. Options with a value of undefined or null act as blank options which reset the value.

[willshowell]

@crisbeto while this is currently intended behavior, is there any wisdom in always rendering the trigger value if mat-select-trigger is defined?

[mmalerba]

@crisbeto But you should be able to put your own display value for when nothing is selected like "-- Please select --" or something.

[crisbeto]

@mmalerba the problem is knowing when to show it. We probably don't want to show it and float the label on a blank select that the user hasn't interacted with, because it makes it stand out next to other blank fields and we can't know whether a value of undefined came from the consumer passing in undefined or the control not having a value at all. I see a couple of solutions:

1. Making it so only the undefined options act as resets, while the null ones could be used as the -- Please select -- placeholder. I can see this approach being a little confusing for users.
2. Instead of floating the label for undefined and null, we replace it with the option's label. This could be a little confusing API-wise, because it makes the options act as placeholder text, but it seems like it might be what we want.

[mmalerba]

I see. I have an issue filed for input to separate the concept of label vs placeholder (#6194) to make it match the latest mocks. Maybe a similar sort of thing could work for the select, when the label floats we reveal the null/undefined display value.

[hsinyu-chen]

Why don't we show the trigger whenever the label floats?
Would it be better if nothing is selected, the text colors are lighter.

[jandsu]

I believe that there is similar issue when the select is multiple and no value is selected: the value is then an empty array, evaluating to a falsy value just as null or undefined....

Please let me know if this deserves another issue or not. I wanted to remain on the less-noisy option by default.

[mmalerba]

@crisbeto assigning to you since its related to the label / placeholder split

[PhilHuot]

ETA on this please?

[ggranum]

@crisbeto, regarding when to show it: I would strongly argue that if the value for 'trigger' is not empty, it should always be displayed. The developer has full control over the value provided to the trigger, and with a simple 'Placeholder will not display unless the triggerValue is empty' in the docs, it's clear enough what needs to be done.

If that is not an option, then it should be one, via a flag.

For a use case, I present a multi-select where 'No Selection' is allowed. I would like to display 'All', 'Partial ({{count}})' or 'None'. I cannot display None, because the selection is empty thus the (empty) placeholder is displayed instead.

[k-krupka]

Is there any workaround which is not including extra option for this one?

[kakins]

I also have a list of 'All', 'Open', 'Vacant', where the model is a nullable boolean. Choosing 'All' will set the model to null or undefined. If resetting the displayed option to the placeholder value is the 'expected behavior', what then are we supposed to do in situations like I just described?

[hsinyu-chen]

now we have mat-label for this

<mat-form-field>
    <mat-label>Status</mat-label>
    <mat-select placeholder="Please Select">...</mat-select>
</mat-form-field>

@crisbeto I think you can close this issue

[akvaliya]

I have used placeholder & label both. I am still facing the issue. There is a no way for user to know that list is empty. It's just looks like click is not working on select.

I don't understand why this issue is closed.

[hsinyu-chen]

@akvaliya
https://stackblitz.com/edit/angular-kzuy4y
did you set floatLabel to always ?

[akvaliya]

That's not my requirements. It float on click. User should be able to know that list is empty.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}