Skip to content

Commit 98f0142

Browse files
crisbetovivian-hu-zz
authored andcommittedJan 16, 2019
fix(button-toggle): remove references to selected toggle on destroy (#14627)
Currently when a button toggle is destroyed, we still keep a reference to it in the selection model which is leaky and causes the model value to be inaccurate. These changes remove the reference.
1 parent 86c530e commit 98f0142

File tree

2 files changed

+27
-1
lines changed

2 files changed

+27
-1
lines changed
 

‎src/lib/button-toggle/button-toggle.spec.ts

+19-1
Original file line numberDiff line numberDiff line change
@@ -416,6 +416,23 @@ describe('MatButtonToggle without forms', () => {
416416

417417
expect(buttonToggleInstances.every(toggle => !toggle.checked)).toBe(true);
418418
});
419+
420+
it('should update the model if a selected toggle is removed', fakeAsync(() => {
421+
expect(groupInstance.value).toBeFalsy();
422+
buttonToggleLabelElements[0].click();
423+
fixture.detectChanges();
424+
425+
expect(groupInstance.value).toBe('test1');
426+
expect(groupInstance.selected).toBe(buttonToggleInstances[0]);
427+
428+
testComponent.renderFirstToggle = false;
429+
fixture.detectChanges();
430+
tick();
431+
432+
expect(groupInstance.value).toBeFalsy();
433+
expect(groupInstance.selected).toBeFalsy();
434+
}));
435+
419436
});
420437

421438
describe('with initial value and change event', () => {
@@ -787,7 +804,7 @@ describe('MatButtonToggle without forms', () => {
787804
<mat-button-toggle-group [disabled]="isGroupDisabled"
788805
[vertical]="isVertical"
789806
[(value)]="groupValue">
790-
<mat-button-toggle value="test1">Test1</mat-button-toggle>
807+
<mat-button-toggle value="test1" *ngIf="renderFirstToggle">Test1</mat-button-toggle>
791808
<mat-button-toggle value="test2">Test2</mat-button-toggle>
792809
<mat-button-toggle value="test3">Test3</mat-button-toggle>
793810
</mat-button-toggle-group>
@@ -797,6 +814,7 @@ class ButtonTogglesInsideButtonToggleGroup {
797814
isGroupDisabled: boolean = false;
798815
isVertical: boolean = false;
799816
groupValue: string;
817+
renderFirstToggle = true;
800818
}
801819

802820
@Component({

‎src/lib/button-toggle/button-toggle.ts

+8
Original file line numberDiff line numberDiff line change
@@ -487,7 +487,15 @@ export class MatButtonToggle extends _MatButtonToggleMixinBase implements OnInit
487487
}
488488

489489
ngOnDestroy() {
490+
const group = this.buttonToggleGroup;
491+
490492
this._focusMonitor.stopMonitoring(this._elementRef);
493+
494+
// Remove the toggle from the selection once it's destroyed. Needs to happen
495+
// on the next tick in order to avoid "changed after checked" errors.
496+
if (group && group._isSelected(this)) {
497+
Promise.resolve().then(() => group._syncButtonToggle(this, false));
498+
}
491499
}
492500

493501
/** Focuses the button. */

0 commit comments

Comments
 (0)
Please sign in to comment.