Skip to content

Commit 12f96e2

Browse files
committed
fix(material/select): resolve change after checked errors
Resolves several "changed after checked" errors in `mat-select` and `mat-option` due to state flowing in both directions. (cherry picked from commit 02f626d)
1 parent 77c8534 commit 12f96e2

File tree

4 files changed

+14
-7
lines changed

4 files changed

+14
-7
lines changed

goldens/material/select/index.api.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -270,7 +270,8 @@ export class MatSelect implements AfterContentInit, OnChanges, OnDestroy, OnInit
270270
readonly disableAutomaticLabeling = true;
271271
disabled: boolean;
272272
disableOptionCentering: boolean;
273-
disableRipple: boolean;
273+
get disableRipple(): boolean;
274+
set disableRipple(value: boolean);
274275
// (undocumented)
275276
readonly _elementRef: ElementRef<any>;
276277
get empty(): boolean;

src/material/core/option/option.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import {
2525
inject,
2626
isSignal,
2727
Signal,
28+
signal,
2829
} from '@angular/core';
2930
import {Subject} from 'rxjs';
3031
import {MAT_OPTGROUP, MatOptgroup} from './optgroup';
@@ -87,7 +88,6 @@ export class MatOption<T = any> implements FocusableOption, AfterViewChecked, On
8788
private _signalDisableRipple = false;
8889
private _selected = false;
8990
private _active = false;
90-
private _disabled = false;
9191
private _mostRecentViewValue = '';
9292

9393
/** Whether the wrapping component is in multiple selection mode. */
@@ -109,11 +109,12 @@ export class MatOption<T = any> implements FocusableOption, AfterViewChecked, On
109109
/** Whether the option is disabled. */
110110
@Input({transform: booleanAttribute})
111111
get disabled(): boolean {
112-
return (this.group && this.group.disabled) || this._disabled;
112+
return (this.group && this.group.disabled) || this._disabled();
113113
}
114114
set disabled(value: boolean) {
115-
this._disabled = value;
115+
this._disabled.set(value);
116116
}
117+
private _disabled = signal(false);
117118

118119
/** Whether ripples for the option are disabled. */
119120
get disableRipple(): boolean {

src/material/select/select.spec.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ import {
3838
ViewChildren,
3939
WritableSignal,
4040
inject,
41-
provideCheckNoChangesConfig,
4241
signal,
4342
} from '@angular/core';
4443
import {ComponentFixture, TestBed, fakeAsync, flush, tick} from '@angular/core/testing';
@@ -84,7 +83,6 @@ describe('MatSelect', () => {
8483
dir = signal('ltr');
8584
TestBed.configureTestingModule({
8685
providers: [
87-
provideCheckNoChangesConfig({exhaustive: false}),
8886
{provide: MATERIAL_ANIMATIONS, useValue: {animationsDisabled: true}},
8987
provideFakeDirectionality(dir),
9088
{

src/material/select/select.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ import {
6161
HostAttributeToken,
6262
Renderer2,
6363
Injector,
64+
signal,
6465
} from '@angular/core';
6566
import {
6667
AbstractControl,
@@ -414,7 +415,13 @@ export class MatSelect
414415

415416
/** Whether ripples in the select are disabled. */
416417
@Input({transform: booleanAttribute})
417-
disableRipple: boolean = false;
418+
get disableRipple() {
419+
return this._disableRipple();
420+
}
421+
set disableRipple(value: boolean) {
422+
this._disableRipple.set(value);
423+
}
424+
private _disableRipple = signal(false);
418425

419426
/** Tab index of the select. */
420427
@Input({

0 commit comments

Comments
 (0)