fix(combo): form control binding w/ empty array and value reset #8098

Author: damyanpetev

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -97,12 +97,10 @@ describe('igxCombo', () => {
 
             // writeValue
             expect(combo.value).toBe('');
-            mockSelection.add_items.and.returnValue(new Set(['test']));
+            mockSelection.get.and.returnValue(new Set(['test']));
             spyOnProperty(combo, 'isRemote').and.returnValue(false);
             combo.writeValue(['test']);
-            // TODO: Uncomment after fix for write value going through entire selection process
-            // expect(mockNgControl.registerOnChangeCb).not.toHaveBeenCalled();
-            expect(mockSelection.add_items).toHaveBeenCalledWith(combo.id, ['test'], true);
+            expect(mockNgControl.registerOnChangeCb).not.toHaveBeenCalled();
             expect(mockSelection.select_items).toHaveBeenCalledWith(combo.id, ['test'], true);
             expect(combo.value).toBe('test');
 
@@ -207,17 +205,18 @@ describe('igxCombo', () => {
             spyOn(mockIconService, 'addSvgIconFromText').and.returnValue(null);
             combo.ngOnInit();
             combo.data = data;
-            spyOn(combo, 'selectItems');
+            mockSelection.select_items.calls.reset();
+            spyOnProperty(combo, 'isRemote').and.returnValue(false);
             combo.writeValue(['EXAMPLE']);
-            expect(combo.selectItems).toHaveBeenCalledTimes(1);
+            expect(mockSelection.select_items).toHaveBeenCalledTimes(1);
 
-            // Calling "SelectItems" through the writeValue accessor should clear the previous values;
+            // Calling "select_items" through the writeValue accessor should clear the previous values;
             // Select items is called with the invalid value and it is written in selection, though no item is selected
             // Controlling the selection is up to the user
-            expect(combo.selectItems).toHaveBeenCalledWith(['EXAMPLE'], true);
+            expect(mockSelection.select_items).toHaveBeenCalledWith(combo.id, ['EXAMPLE'], true);
             combo.writeValue(combo.data[0]);
             // When value key is specified, the item's value key is stored in the selection
-            expect(combo.selectItems).toHaveBeenCalledWith(combo.data[0], true);
+            expect(mockSelection.select_items).toHaveBeenCalledWith(combo.id, [], true);
         });
         it('should select items through setSelctedItem method', () => {
             const selectionService = new IgxSelectionAPIService();

projects/igniteui-angular/src/lib/combo/combo.component.ts

@@ -1258,8 +1258,10 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      * @hidden @internal
      */
     public writeValue(value: any[]): void {
-        this.selectItems(value, true);
-        this.cdr.markForCheck();
+        const selection = Array.isArray(value) ? value : [];
+        const oldSelection = this.selectedItems();
+        this.selection.select_items(this.id, selection, true);
+        this._value = this.createDisplayText(this.selectedItems(), oldSelection);
     }
 
     /**

src/app/combo/combo.sample.html

@@ -18,13 +18,16 @@
                 <div>
                     <h5 class="sample-title">Template Form</h5>
                     <form>
-                        <igx-combo class="input-container" [placeholder]="'Locations'" name="anyName" required
-                            [(ngModel)]="values1" [ngModelOptions]="{ updateOn: 'blur' }" #comboModel="ngModel"
+                        <igx-combo class="input-container" [placeholder]="'Locations'" name="anyName" #comboModel="ngModel"
+                            [(ngModel)]="values1" [ngModelOptions]="{ updateOn: 'blur' }" minlength="2" required
                             [data]="items" [filterable]="filterableFlag" [displayKey]="valueKeyVar"
                             [valueKey]="valueKeyVar" [groupKey]="valueKeyVar ? 'region' : ''" [width]="'100%'">
+                            <label igxLabel>States</label>
                             <igx-hint>Please select the states you've visited</igx-hint>
                         </igx-combo>
                     </form>
+                    <button igxButton (click)="values1 = values1.concat(['Missouri'])">Add Missouri</button>
+                    <button igxButton (click)="values1 = []">Clear values </button>
                 </div>
                 <div>
                     <h5 class="sample-title">Reactive Form</h5>

src/app/combo/combo.sample.ts

@@ -44,7 +44,7 @@ export class ComboSampleComponent implements OnInit, AfterViewInit {
     public customValuesFlag = true;
     public autoFocusSearch = true;
     public items: any[] = [];
-    public values1:  Array<any>;
+    public values1:  Array<any> = ['Arizona'];
     public values2:  Array<any>;
 
     public valueKeyVar = 'field';