fix(material/list): resolve changed after checked error

crisbeto · crisbeto · commit d120f973f8bc · 2025-05-24T13:30:56.000+02:00
Resolves a "changed after checked" error in the list due to the disabled state of the item being dependent on the state of the list. (cherry picked from commit 83f9123)
diff --git a/src/material/list/list-base.ts b/src/material/list/list-base.ts
@@ -19,6 +19,7 @@ import {
   OnDestroy,
   QueryList,
   Injector,
+  signal,
 } from '@angular/core';
 import {
   _animationsDisabled,
@@ -64,12 +65,12 @@ export abstract class MatListBase {
    */
   @Input()
   get disabled(): boolean {
-    return this._disabled;
+    return this._disabled();
   }
   set disabled(value: BooleanInput) {
-    this._disabled = coerceBooleanProperty(value);
+    this._disabled.set(coerceBooleanProperty(value));
   }
-  private _disabled = false;
+  private _disabled = signal(false);
 
   protected _defaultOptions = inject(MAT_LIST_CONFIG, {optional: true});
 }
@@ -149,12 +150,12 @@ export abstract class MatListItemBase implements AfterViewInit, OnDestroy, Rippl
   /** Whether the list-item is disabled. */
   @Input()
   get disabled(): boolean {
-    return this._disabled || !!this._listBase?.disabled;
+    return this._disabled() || !!this._listBase?.disabled;
   }
   set disabled(value: BooleanInput) {
-    this._disabled = coerceBooleanProperty(value);
+    this._disabled.set(coerceBooleanProperty(value));
   }
-  private _disabled = false;
+  private _disabled = signal(false);
 
   private _subscriptions = new Subscription();
   private _rippleRenderer: RippleRenderer | null = null;
diff --git a/src/material/list/selection-list.spec.ts b/src/material/list/selection-list.spec.ts
@@ -10,7 +10,6 @@ import {
   ChangeDetectionStrategy,
   Component,
   DebugElement,
-  provideCheckNoChangesConfig,
   QueryList,
   ViewChildren,
 } from '@angular/core';
@@ -43,21 +42,6 @@ describe('MatSelectionList without forms', () => {
     let listOptions: DebugElement[];
     let selectionList: DebugElement;
 
-    beforeEach(waitForAsync(() => {
-      TestBed.configureTestingModule({
-        providers: [provideCheckNoChangesConfig({exhaustive: false})],
-        imports: [
-          MatListModule,
-          SelectionListWithListOptions,
-          SelectionListWithCheckboxPositionAfter,
-          SelectionListWithListDisabled,
-          SelectionListWithOnlyOneOption,
-          SelectionListWithIndirectChildOptions,
-          SelectionListWithSelectedOptionAndValue,
-        ],
-      });
-    }));
-
     beforeEach(waitForAsync(() => {
       fixture = TestBed.createComponent(SelectionListWithListOptions);
       fixture.detectChanges();
@@ -1277,23 +1261,6 @@ describe('MatSelectionList without forms', () => {
 });
 
 describe('MatSelectionList with forms', () => {
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      providers: [provideCheckNoChangesConfig({exhaustive: false})],
-      imports: [
-        MatListModule,
-        FormsModule,
-        ReactiveFormsModule,
-        SelectionListWithModel,
-        SelectionListWithFormControl,
-        SelectionListWithPreselectedOption,
-        SelectionListWithPreselectedOptionAndModel,
-        SelectionListWithPreselectedFormControlOnPush,
-        SelectionListWithCustomComparator,
-      ],
-    });
-  }));
-
   describe('and ngModel', () => {
     let fixture: ComponentFixture<SelectionListWithModel>;
     let selectionListDebug: DebugElement;
diff --git a/src/material/list/selection-list.ts b/src/material/list/selection-list.ts
@@ -30,6 +30,7 @@ import {
   ViewEncapsulation,
   forwardRef,
   inject,
+  signal,
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {ThemePalette} from '../core';
@@ -265,18 +266,18 @@ export class MatSelectionList
    */
   @Input()
   override get disabled(): boolean {
-    return this._selectionListDisabled;
+    return this._selectionListDisabled();
   }
   override set disabled(value: BooleanInput) {
     // Update the disabled state of this list. Write to `this._selectionListDisabled` instead of
     // `super.disabled`. That is to avoid closure compiler compatibility issues with assigning to
     // a super property.
-    this._selectionListDisabled = coerceBooleanProperty(value);
-    if (this._selectionListDisabled) {
+    this._selectionListDisabled.set(coerceBooleanProperty(value));
+    if (this._selectionListDisabled()) {
       this._keyManager?.setActiveItem(-1);
     }
   }
-  private _selectionListDisabled = false;
+  private _selectionListDisabled = signal(false);
 
   /** Implemented as part of ControlValueAccessor. */
   registerOnChange(fn: (value: any) => void): void {
