Skip to content

Commit 5fc95ba

Browse files
committed
fix(material/button-toggle): make null value selected on init
When button-toggle have init value as null, it's not get selected. This fix remove condition which stopping null button to select. Fixes #25472
1 parent 49792f4 commit 5fc95ba

File tree

2 files changed

+18
-3
lines changed

2 files changed

+18
-3
lines changed

src/material/button-toggle/button-toggle.spec.ts

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -841,6 +841,21 @@ describe('MatButtonToggle without forms', () => {
841841
expect(fixture.componentInstance.toggles.toArray()[1].checked).toBe(true);
842842
});
843843

844+
it('should not throw on init when toggles are repeated and there is an initial value null', () => {
845+
const fixture = TestBed.createComponent(RepeatedButtonTogglesWithPreselectedValue);
846+
fixture.detectChanges();
847+
848+
expect(fixture.componentInstance.toggleGroup.value).toBe('Two');
849+
expect(fixture.componentInstance.toggles.toArray()[1].checked).toBe(true);
850+
851+
fixture.componentInstance.possibleValues = [null, 'Five', 'Six'];
852+
fixture.componentInstance.value = null;
853+
fixture.detectChanges();
854+
855+
expect(fixture.componentInstance.toggleGroup.value).toBe(null);
856+
expect(fixture.componentInstance.toggles.toArray()[0].checked).toBe(true);
857+
});
858+
844859
it('should not throw on init when toggles are repeated and there is an initial value', () => {
845860
const fixture = TestBed.createComponent(ButtonToggleWithStaticName);
846861
fixture.detectChanges();
@@ -1064,8 +1079,8 @@ class RepeatedButtonTogglesWithPreselectedValue {
10641079
@ViewChild(MatButtonToggleGroup) toggleGroup: MatButtonToggleGroup;
10651080
@ViewChildren(MatButtonToggle) toggles: QueryList<MatButtonToggle>;
10661081

1067-
possibleValues = ['One', 'Two', 'Three'];
1068-
value = 'Two';
1082+
possibleValues: (string | null)[] = ['One', 'Two', 'Three'];
1083+
value: string | null = 'Two';
10691084
}
10701085

10711086
@Component({

src/material/button-toggle/button-toggle.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -359,7 +359,7 @@ export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, After
359359
/** Selects a value if there's a toggle that corresponds to it. */
360360
private _selectValue(value: any) {
361361
const correspondingOption = this._buttonToggles.find(toggle => {
362-
return toggle.value != null && toggle.value === value;
362+
return toggle.value === value;
363363
});
364364

365365
if (correspondingOption) {

0 commit comments

Comments
 (0)