refactor(combo): change combo remote selection clear, add tests #5729

Author: ViktorSlavov

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

@@ -960,8 +960,8 @@ describe('igxCombo', () => {
             // Combo selection is now based on valueKey:
             // if valueKey is specified, only the key will be written in the selection (not the whole data entry)
             const itemID = combo.valueKey !== null && combo.value !== undefined ?
-            combo.data[itemIndex][combo.valueKey] :
-            combo.data[itemIndex];
+                combo.data[itemIndex][combo.valueKey] :
+                combo.data[itemIndex];
             expect(combo.isItemSelected(itemID)).toBeTruthy();
             expect(combo.selectedItems()[selectedItemIndex]).toEqual(itemID);
         }
@@ -971,8 +971,8 @@ describe('igxCombo', () => {
             itemIndex: number) {
             const checkbox = getCheckbox(dropdownElement, itemIndex);
             const itemID = combo.valueKey !== null && combo.value !== undefined ?
-            combo.data[itemIndex][combo.valueKey] :
-            combo.data[itemIndex];
+                combo.data[itemIndex][combo.valueKey] :
+                combo.data[itemIndex];
             expect(checkbox.classList.contains(CSS_CLASS_CHECKED)).toBeFalsy();
             expect(combo.isItemSelected(itemID)).toBeFalsy();
         }
@@ -2286,6 +2286,37 @@ describe('igxCombo', () => {
                 }, 20);
             }, 10);
         });
+
+        it('Should bind combo data to remote data and clear selection properly', async (done) => {
+            const fixture = TestBed.createComponent(IgxComboRemoteDataComponent);
+            fixture.detectChanges();
+            const combo = fixture.componentInstance.instance;
+            let selectedItems = [combo.data[0], combo.data[1]];
+            const spyObj = jasmine.createSpyObj('event', ['stopPropagation']);
+            combo.toggle();
+            combo.selectItems([selectedItems[0][combo.valueKey], selectedItems[1][combo.valueKey]]);
+            expect(combo.value).toEqual(`${selectedItems[0][combo.displayKey]}, ${selectedItems[1][combo.displayKey]}`);
+            expect(combo.selectedItems()).toEqual([selectedItems[0][combo.valueKey], selectedItems[1][combo.valueKey]]);
+            // Clear items while they are in view
+            combo.handleClearItems(spyObj);
+            expect(combo.selectedItems()).toEqual([]);
+            expect(combo.value).toBe('');
+            selectedItems = [combo.data[2], combo.data[3]];
+            combo.selectItems([selectedItems[0][combo.valueKey], selectedItems[1][combo.valueKey]]);
+            expect(combo.value).toEqual(`${selectedItems[0][combo.displayKey]}, ${selectedItems[1][combo.displayKey]}`);
+
+            // Scroll selected items out of view
+            combo.virtualScrollContainer.scrollTo(40);
+            await wait(60);
+            fixture.detectChanges();
+            combo.handleClearItems(spyObj);
+            expect(combo.selectedItems()).toEqual([]);
+            expect(combo.value).toBe('');
+            combo.selectItems([combo.data[7][combo.valueKey]]);
+            expect(combo.value).toBe(combo.data[7][combo.displayKey]);
+            done();
+        });
+
         it('Should render empty template when combo data source is not set', fakeAsync(() => {
             const fixture = TestBed.createComponent(IgxComboEmptyTestComponent);
             fixture.detectChanges();
@@ -3214,7 +3245,7 @@ describe('igxCombo', () => {
             expect(fixture.componentInstance.comboSelectedItems).toEqual([...data].splice(1, 3));
         }));
 
-        it('Should properly initialize when used in a Template form control', fakeAsync (() => {
+        it('Should properly initialize when used in a Template form control', fakeAsync(() => {
             const fix = TestBed.createComponent(IgxComboInTemplatedFormComponent);
             fix.detectChanges();
             tick();

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

@@ -1108,14 +1108,14 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
 
     /** Contains key-value pairs of the selected valueKeys and their resp. displayKeys */
     private registerRemoteEntries(ids: any[], add = true) {
-        const selection = this.getValueDisplayPairs(ids);
         if (add) {
+            const selection = this.getValueDisplayPairs(ids);
             for (const entry of selection) {
                 this._remoteSelection[entry[this.valueKey]] = entry[this.displayKey];
             }
         } else {
-            for (const entry of selection) {
-                delete this._remoteSelection[entry[this.valueKey]];
+            for (const entry of ids) {
+                delete this._remoteSelection[entry];
             }
         }
     }