How to disable keyboard interaction of md-select in angular 4?
In your md-option
, add (keydown)="$event.stopPropagation()"
:
<md-select placeholder="Favorite food" >
<md-option *ngFor="let food of foods" [value]="food.value"
(keydown)="$event.stopPropagation()" >
{{ food.viewValue }}
</md-option>
</md-select>
Link to working demo.
For Angular-v7 and above: Use a input control so that we don't need to change built-in behavior of Angular Material Select, as @RyanDiehl suggested we should avoid.
Note: I'm adding this answer because I believe this sort of behavior will be required when someone wants to add a filter or to allow user to insert option into options. So I took the liberty to add this answer for other developers like myself, who have this situation.
In input
, add (keydown)="$event.stopPropagation()"
:
<mat-form-field>
<mat-select placeholder="Favorite food" multiple>
<mat-form-field class="example-form-field">
<input matInput type="text" placeholder="Clearable input" [(ngModel)]="value"
(keydown)="$event.stopPropagation()">
<button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="save()">
<mat-icon>done</mat-icon>
</button>
</mat-form-field>
<mat-divider></mat-divider>
<mat-option *ngFor="let food of foods" [value]="food.value" >
{{food.viewValue}} <span> <button mat-button matSuffix mat-icon-button aria-label="Clear"
(click)="delete(food.value)"
>
<mat-icon>close</mat-icon>
</button></span>
</mat-option>
</mat-select>
</mat-form-field>
Link to working demo.
GitHub Issue