Search code examples
angularselectfocus

Remove focus from mat-select after selection change


In .html file i have selector:

<mat-form-field>
    <mat-select #selector(selectionChange)="onSelectionChange($event.value)">
      <mat-option *ngFor="let test of tests" [value]="test">
      </mat-option>
    </mat-select>
  </mat-form-field>

In .ts file I have:

  @ViewChild('selector', { static: false }) selector: MatSelect

  onSelectionChange(value: any) {
    this.selector.focused = false;
  }

It doesn't work because focused is read only parameter, but how to achieve this effect other way?


Solution

  • MatSelect expose close method.

    Try this:

     onSelectionChange(value: any) {
        this.selector.close();
      }