fix(selection-list): form control disable locks disabled property (#12113)

Fixes that the `setDisabledState` control value accessor hook updates the disabled state of each option individually. This causes the `MatSelectionList#disabled` property to no longer have any effect.

Fixes #12107

Author: devversion

src/lib/list/selection-list.spec.ts

@@ -840,26 +840,53 @@ describe('MatSelectionList with forms', () => {
   describe('and formControl', () => {
     let fixture: ComponentFixture<SelectionListWithFormControl>;
     let listOptions: MatListOption[];
+    let selectionList: MatSelectionList;
 
     beforeEach(() => {
       fixture = TestBed.createComponent(SelectionListWithFormControl);
       fixture.detectChanges();
 
+      selectionList = fixture.debugElement.query(By.directive(MatSelectionList)).componentInstance;
       listOptions = fixture.debugElement.queryAll(By.directive(MatListOption))
         .map(optionDebugEl => optionDebugEl.componentInstance);
     });
 
     it('should be able to disable options from the control', () => {
+      expect(selectionList.disabled)
+        .toBe(false, 'Expected the selection list to be enabled.');
       expect(listOptions.every(option => !option.disabled))
         .toBe(true, 'Expected every list option to be enabled.');
 
       fixture.componentInstance.formControl.disable();
       fixture.detectChanges();
 
+      expect(selectionList.disabled)
+        .toBe(true, 'Expected the selection list to be disabled.');
       expect(listOptions.every(option => option.disabled))
         .toBe(true, 'Expected every list option to be disabled.');
     });
 
+    it('should be able to update the disabled property after form control disabling', () => {
+      expect(listOptions.every(option => !option.disabled))
+        .toBe(true, 'Expected every list option to be enabled.');
+
+      fixture.componentInstance.formControl.disable();
+      fixture.detectChanges();
+
+      expect(listOptions.every(option => option.disabled))
+        .toBe(true, 'Expected every list option to be disabled.');
+
+      // Previously the selection list has been disabled through FormControl#disable. Now we
+      // want to verify that we can still change the disabled state through updating the disabled
+      // property. Calling FormControl#disable should not lock the disabled property.
+      // See: https://github.com/angular/material2/issues/12107
+      selectionList.disabled = false;
+      fixture.detectChanges();
+
+      expect(listOptions.every(option => !option.disabled))
+        .toBe(true, 'Expected every list option to be enabled.');
+    });
+
     it('should be able to set the value through the form control', () => {
       expect(listOptions.every(option => !option.selected))
         .toBe(true, 'Expected every list option to be unselected.');

src/lib/list/selection-list.ts

@@ -461,9 +461,7 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu
 
   /** Implemented as a part of ControlValueAccessor. */
   setDisabledState(isDisabled: boolean): void {
-    if (this.options) {
-      this.options.forEach(option => option.disabled = isDisabled);
-    }
+    this.disabled = isDisabled;
   }
 
   /** Implemented as part of ControlValueAccessor. */