fix(material/list): option views not change detected when control is …

…disabled (angular#30532)

Fixes that we weren't change detecting the view of the selection list options when the form control for the entire list is disabled. The visual difference is subtle for unchecked options, but it's noticeable for checked ones.

Fixes angular#30522.

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

@@ -1540,20 +1540,24 @@ describe('MatSelectionList with forms', () => {
     });
 
     it('should be able to disable options from the control', () => {
+      const optionElements = listOptions.map(option => option._elementRef.nativeElement);
+      const inputs = optionElements.map(element => element.querySelector('input')!);
       selectionList.focus();
       expect(selectionList.disabled)
         .withContext('Expected the selection list to be enabled.')
         .toBe(false);
       expect(listOptions.every(option => !option.disabled))
         .withContext('Expected every list option to be enabled.')
         .toBe(true);
-      expect(
-        listOptions.some(
-          option => option._elementRef.nativeElement.getAttribute('tabindex') === '0',
-        ),
-      )
+      expect(optionElements.some(el => el.getAttribute('tabindex') === '0'))
         .withContext('Expected one list item to be in the tab order')
         .toBe(true);
+      // Note: assert the disabled of the inner inputs, because they're placed inside of the
+      // view of the individual options which is detected separately from the host. The tabindex
+      // check above isn't enough, because it doesn't go through change detection.
+      expect(inputs.every(input => !input.disabled))
+        .withContext('Expected all options to be enabled')
+        .toBe(true);
 
       fixture.componentInstance.formControl.disable();
       fixture.detectChanges();
@@ -1564,13 +1568,12 @@ describe('MatSelectionList with forms', () => {
       expect(listOptions.every(option => option.disabled))
         .withContext('Expected every list option to be disabled.')
         .toBe(true);
-      expect(
-        listOptions.every(
-          option => option._elementRef.nativeElement.getAttribute('tabindex') === '-1',
-        ),
-      )
+      expect(optionElements.every(el => el.getAttribute('tabindex') === '-1'))
         .withContext('Expected every list option to be removed from the tab order')
         .toBe(true);
+      expect(inputs.every(input => input.disabled))
+        .withContext('Expected all options to be disabled')
+        .toBe(true);
     });
 
     it('should be able to update the disabled property after form control disabling', () => {

src/material/list/selection-list.ts

@@ -256,6 +256,7 @@ export class MatSelectionList
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
     this._changeDetectorRef.markForCheck();
+    this._markOptionsForCheck();
   }
 
   /**