md-select doesn't reset placeholder effectively "clearing" selection

[skeize]

It's entirely possible I'm not doing things right, but... the placeholder within the md-select doesn't appear to be resetting from it's floating position after selecting an empty md-option.. effectively clearing the selection.

Here's what I've got:

    <md-select name="thing" placeholder="Thing" formControlName="thing">
        <md-option></md-option>
        <md-option *ngFor="let t of things" [value]="t.id">{{t.name}}</md-option>
    </md-select>

My form/controls are defined as follow:

    thing = new FormControl(null, Validators.required);

    this.editForm = new FormGroup({
        thing: this.thing,
        ...
    });

When initialized with a null value, the placeholder appears as it should, after choosing an option, then choosing the empty option (), the form control's value is set to null, however the placeholder doesn't leave the floating position.

I've also tried setting the empty option's value to null (<md-option [value]="null">) with no success.

I'm using Chrome on Windows 10.
Angular 2.4.3
Material 2.0.0-beta.1

Thanks!

[ig16022]

I am seeing the same behavior. Does anyone have a workaround for this?

[codef0rmer]

@skeize @ig16022 When you select the first option without value and text, the thing property is set to undefined (or whatever value you set in the template) which matches with the value of the first option i.e no value meaning undefined, resulting in not clearing the placeholder. Even if you set the value to null i.e. <md-option value="null"></md-option>, it won't work because it has to be null not "null".

So to fix the issue, you have to watch for the model change and explicitly nullify it:

<md-select name="thing" placeholder="Thing" formControlName="thing" (ngModelChange)="thing = (thing == undefined ? null : thing)">
        <md-option></md-option>
        <md-option *ngFor="let t of things" [value]="t.id">{{t.name}}</md-option>
</md-select>

[kara]

@skeize We haven't yet implemented a convenient "clearing" API by clicking an option like there was in Material 1. In the meantime, you can do something like this:

<md-select placeholder="Thing" formControlName="thing">
   <md-option (click)="thing.reset()"></md-option>
   <md-option *ngFor="let t of things" [value]="t.id">{{t.name}}</md-option>
</md-select>

I had a note for this on the md-select board, but I'll keep this issue open so people can track when it gets in.

[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.}