diff --git a/src/lib/chips/chip-list.spec.ts b/src/lib/chips/chip-list.spec.ts index 5b7e9e2e25e5..ba9ca9c80a43 100644 --- a/src/lib/chips/chip-list.spec.ts +++ b/src/lib/chips/chip-list.spec.ts @@ -41,6 +41,7 @@ describe('MatChipList', () => { InputChipList, MultiSelectionChipList, FalsyValueChipList, + SelectedChipList ], providers: [{ provide: Directionality, useFactory: () => { @@ -63,6 +64,21 @@ describe('MatChipList', () => { }); }); + describe('with selected chips', () => { + beforeEach(async(() => { + fixture = TestBed.createComponent(SelectedChipList); + fixture.detectChanges(); + })); + + it('should not override chips selected', () => { + const instanceChips = fixture.componentInstance.chips.toArray(); + + expect(instanceChips[0].selected).toBe(true, 'Expected first option to be selected.'); + expect(instanceChips[1].selected).toBe(false, 'Expected second option to be not selected.'); + expect(instanceChips[2].selected).toBe(true, 'Expected third option to be selected.'); + }); + }); + describe('focus behaviors', () => { beforeEach(async(() => { setupStandardList(); @@ -1027,3 +1043,21 @@ class FalsyValueChipList { control = new FormControl(); @ViewChildren(MatChip) chips: QueryList; } + +@Component({ + template: ` + + + {{ food.viewValue }} + + + ` +}) +class SelectedChipList { + foods: any[] = [ + { value: 0, viewValue: 'Steak', selected: true }, + { value: 1, viewValue: 'Pizza', selected: false }, + { value: 2, viewValue: 'Pasta', selected: true }, + ]; + @ViewChildren(MdChip) chips: QueryList; +} diff --git a/src/lib/chips/chip-list.ts b/src/lib/chips/chip-list.ts index 879d1cda432b..844315d01eb7 100644 --- a/src/lib/chips/chip-list.ts +++ b/src/lib/chips/chip-list.ts @@ -570,8 +570,10 @@ export class MatChipList implements MatFormFieldControl, ControlValueAccess // Defer setting the value in order to avoid the "Expression // has changed after it was checked" errors from Angular. Promise.resolve().then(() => { - this._setSelectionByValue(this.ngControl ? this.ngControl.value : this._value, false); - this.stateChanges.next(); + if (this.ngControl || this._value) { + this._setSelectionByValue(this.ngControl ? this.ngControl.value : this._value, false); + this.stateChanges.next(); + } }); }