CODEWITHSUNDEEP
angular-material
rubixkube
rubixkube

Reputation: 97

Angular Material Selection List - Disabled options can be selected/deselected by keyboard

I have a list of items that get disabled on init depending on users settings. It was just pointed out to me that you can navigate via keyboard and select/deselect items that are otherwise disabled. See : https://stackblitz.com/edit/angular-material2-issue-m5gtdy

is this a bug, or am I missing something?

  <mat-selection-list required >
   <mat-list-option checkboxPosition="before">EU
   </mat-list-option>
   <mat-list-option checkboxPosition="before" disabled=“true”>US
   </mat-list-option>
   <mat-list-option checkboxPosition="before">CA
   </mat-list-option>
 </mat-selection-list>

Upvotes: 3

Views: 4931

Answers (1)

camden_kid
camden_kid

Reputation: 12813

It looks like a bug but here's a possible (hacky?) solution - StackBlitz

Component

export class AppComponent implements AfterViewInit {
  version = VERSION;
  @ViewChild('selectionList') selectionList: MatSelectionList;

  ngAfterViewInit() {
    this.selectionList.selectionChange.subscribe((value: MatSelectionListChange) => {
      if (value.option.disabled) {
        value.option.selected = !value.option.selected;
      }
    })
  }
}

Markup

<mat-selection-list required #selectionList>
   <mat-list-option checkboxPosition="before">EU
   </mat-list-option>
   <mat-list-option checkboxPosition="before" [disabled]="true">US
   </mat-list-option>
   <mat-list-option checkboxPosition="before">CA
   </mat-list-option>
</mat-selection-list>

The idea is to toggle back to it's original value any changes to a disabled option. Note that [disabled] is used to set the Input value.

Upvotes: 3

Related Questions