Components: Selecting reset option in mat-select

[RandomNonameDude]

Bug, feature request, or proposal:

When undefined (reset) option is selected in mat-select, and you open the options list and select the undefined option again, both valueChange and ngModelChange events are fired. When you do the same with non-undefined option, none of the events is fired.

What is the expected behavior?

I would expect undefined options to behave same as non-undefined ones, i. e. not to fire an event when the same option is selected twice.

What is the current behavior?

See above.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-hbmfjn-wk5qdh

Small example in Stackblitz. Undefined option is set as default. Try opening the options list and select the undefined (None) option again. You can see that both valueChange and ngModelChange events are fired (see the timestamps below the mat-select).

You can try selecting any non-undefined option twice and observe the timestamps. You will see that the events are fired only once (after the first selection), but not again when you select the same option for the second time.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Issue occurs in both Chrome and IE on Win7. Not tested anywhere else.

Is there anything else we should know?

Probably not.

[eTallang]

What's the status on this issue? Any chance it will be merged anytime soon?

[stayingcool]

Any update as I'm facing this issue as well.

[sakolesnikov]

I am struggling with the same issue right now.
"@angular/material": "^7.3.6"

[stayingcool]

Does anyone have a workaround for this issue until we have an official fix?

[sakolesnikov]

I solved this issue with additional checking
onChangeFilter(matSelectChange: MatSelectChange) {
if (JSON.stringify(this.filter) != JSON.stringify(this.lastFilter)) {
...
}
this.lastFilter = JSON.parse(JSON.stringify(this.filter));
}
so I have to remember the last state of my filter and then compare it with new one. If there is difference I let pass executing further if there is no changes I just skip this invocation.
It works perfectly for me.

[stayingcool]

Thanks!

I used this flag to bypass this problem:

'event.isUserInput'

Template

<mat-select placeholder="Assign Order"
       formControlName="selectFormControl">
      <mat-option (onSelectionChange)="assignOrder($event)">None</mat-option>
      <mat-option *ngFor="let u of users" [value]="u 
           (onSelectionChange)="assignOrder($event)">{{u.value}}</mat-option>
</mat-select>

TS

assignOrder($event){
  if (event.isUserInput) {
    // Do what you want here. This will be invoked only once!
  }
}

[soraky]

Is there any thing new with this issue? Every other work around isn't really a solution.

[NetliDev]

Is there any thing new with this issue? x2

[NetliDev]

I develop this work around (I'm was working with forms too so...), setting the value to undefined to reset the mat-select.

HTML

<mat-form-field>
          <mat-label>Add roles</mat-label>
          <mat-select formControlName="rolesFormCtrlStepper3" (selectionChange)="createRole($event.value)">
                <mat-option *ngFor="let roleComboBox of rolesComboBox" [value]="roleComboBox">
                             {{roleComboBox}}
                </mat-option>
           </mat-select>
</mat-form-field>

TS

createRole(r) {
...
...
    this.formArray.get([2]).get('rolesFormCtrlStepper3').setValue(undefined);
}

[angular-automatic-lock-bot[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._}