From 196f4c42f13b696bf51f4c98543ae76762d0a111 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Sat, 17 Feb 2018 12:18:29 +0100
Subject: [PATCH] fix(selection-list): incorrect cursor if disabled

* 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.
---
 src/demo-app/list/list-demo.html | 4 +++-
 src/demo-app/list/list-demo.ts   | 1 +
 src/lib/list/list.scss           | 2 +-
 src/lib/list/selection-list.ts   | 7 ++++++-
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/demo-app/list/list-demo.html b/src/demo-app/list/list-demo.html
index c3e46272849d..bfeb40b77627 100644
--- a/src/demo-app/list/list-demo.html
+++ b/src/demo-app/list/list-demo.html
@@ -109,7 +109,8 @@ <h2>Selection list</h2>
 
     <mat-selection-list #groceries [ngModel]="selectedOptions"
                         (ngModelChange)="onSelectedOptionsChange($event)"
-                        (change)="changeEventCount = changeEventCount + 1">
+                        (change)="changeEventCount = changeEventCount + 1"
+                        [disabled]="selectionListDisabled">
       <h3 mat-subheader>Groceries</h3>
 
       <mat-list-option value="bananas" checkboxPosition="before">Bananas</mat-list-option>
@@ -121,6 +122,7 @@ <h3 mat-subheader>Groceries</h3>
     <p>Selected: {{selectedOptions | json}}</p>
     <p>Change Event Count {{changeEventCount}}</p>
     <p>Model Change Event Count {{modelChangeEventCount}}</p>
+    <mat-checkbox [(ngModel)]="selectionListDisabled">Disable Selection List</mat-checkbox>
 
     <p>
       <button mat-raised-button (click)="groceries.selectAll()">Select all</button>
diff --git a/src/demo-app/list/list-demo.ts b/src/demo-app/list/list-demo.ts
index 6e264021d7be..d33e0f559448 100644
--- a/src/demo-app/list/list-demo.ts
+++ b/src/demo-app/list/list-demo.ts
@@ -59,6 +59,7 @@ export class ListDemo {
 
   thirdLine: boolean = false;
   infoClicked: boolean = false;
+  selectionListDisabled: boolean = false;
 
   selectedOptions: string[] = ['apples'];
   changeEventCount: number = 0;
diff --git a/src/lib/list/list.scss b/src/lib/list/list.scss
index b4195b31aaa1..53b5c2204a98 100644
--- a/src/lib/list/list.scss
+++ b/src/lib/list/list.scss
@@ -254,7 +254,7 @@ $mat-list-item-inset-divider-offset: 72px;
 }
 
 .mat-list-option {
-  &:not([disabled]) {
+  &:not(.mat-list-item-disabled) {
     cursor: pointer;
   }
 }
diff --git a/src/lib/list/selection-list.ts b/src/lib/list/selection-list.ts
index 0953e8265751..0ee7ce433b30 100644
--- a/src/lib/list/selection-list.ts
+++ b/src/lib/list/selection-list.ts
@@ -283,7 +283,8 @@ export class MatListOption extends _MatListOptionMixinBase
     '(focus)': 'focus()',
     '(blur)': '_onTouched()',
     '(keydown)': '_keydown($event)',
-    '[attr.aria-disabled]': 'disabled.toString()'},
+    '[attr.aria-disabled]': 'disabled.toString()',
+  },
   template: '<ng-content></ng-content>',
   styleUrls: ['list.css'],
   encapsulation: ViewEncapsulation.None,
@@ -390,6 +391,10 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu
 
   /** Passes relevant key presses to our key manager. */
   _keydown(event: KeyboardEvent) {
+    if (this.disabled) {
+      return;
+    }
+
     switch (event.keyCode) {
       case SPACE:
       case ENTER: