Skip to content

Commit 13e809a

Browse files
devversionandrewseguin
authored andcommitted
fix(selection-list): incorrect cursor if disabled (#9963)
* Currently if a list option is disabled through the `[disabled]` binding, the disabled option still has the `pointer` cursor. * No longer delegates the keydown event to the ListKeyManager when disabled. Right now there can be an exception because all items are disabled. See #9981. Fixes #9952.
1 parent d351e33 commit 13e809a

File tree

4 files changed

+11
-3
lines changed

4 files changed

+11
-3
lines changed

src/demo-app/list/list-demo.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,8 @@ <h2>Selection list</h2>
109109

110110
<mat-selection-list #groceries [ngModel]="selectedOptions"
111111
(ngModelChange)="onSelectedOptionsChange($event)"
112-
(change)="changeEventCount = changeEventCount + 1">
112+
(change)="changeEventCount = changeEventCount + 1"
113+
[disabled]="selectionListDisabled">
113114
<h3 mat-subheader>Groceries</h3>
114115

115116
<mat-list-option value="bananas" checkboxPosition="before">Bananas</mat-list-option>
@@ -121,6 +122,7 @@ <h3 mat-subheader>Groceries</h3>
121122
<p>Selected: {{selectedOptions | json}}</p>
122123
<p>Change Event Count {{changeEventCount}}</p>
123124
<p>Model Change Event Count {{modelChangeEventCount}}</p>
125+
<mat-checkbox [(ngModel)]="selectionListDisabled">Disable Selection List</mat-checkbox>
124126

125127
<p>
126128
<button mat-raised-button (click)="groceries.selectAll()">Select all</button>

src/demo-app/list/list-demo.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ export class ListDemo {
5959

6060
thirdLine: boolean = false;
6161
infoClicked: boolean = false;
62+
selectionListDisabled: boolean = false;
6263

6364
selectedOptions: string[] = ['apples'];
6465
changeEventCount: number = 0;

src/lib/list/list.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -254,7 +254,7 @@ $mat-list-item-inset-divider-offset: 72px;
254254
}
255255

256256
.mat-list-option {
257-
&:not([disabled]) {
257+
&:not(.mat-list-item-disabled) {
258258
cursor: pointer;
259259
}
260260
}

src/lib/list/selection-list.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -283,7 +283,8 @@ export class MatListOption extends _MatListOptionMixinBase
283283
'(focus)': 'focus()',
284284
'(blur)': '_onTouched()',
285285
'(keydown)': '_keydown($event)',
286-
'[attr.aria-disabled]': 'disabled.toString()'},
286+
'[attr.aria-disabled]': 'disabled.toString()',
287+
},
287288
template: '<ng-content></ng-content>',
288289
styleUrls: ['list.css'],
289290
encapsulation: ViewEncapsulation.None,
@@ -390,6 +391,10 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu
390391

391392
/** Passes relevant key presses to our key manager. */
392393
_keydown(event: KeyboardEvent) {
394+
if (this.disabled) {
395+
return;
396+
}
397+
393398
switch (event.keyCode) {
394399
case SPACE:
395400
case ENTER:

0 commit comments

Comments
 (0)