Merge branch '8.2.x' into nrobakova/fix-issue-5837

Author: zdrawku

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];
             }
         }
     }

projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss

@@ -12,7 +12,6 @@
 /// @requires --var
 @mixin _excel-filtering($theme, $palette) {
     %grid-excel-filter {
-        height: rem(15px);
         display: block;
     }
 

projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts

@@ -14,10 +14,10 @@ import {
 import {
     HorizontalAlignment,
     VerticalAlignment,
-    ConnectedPositioningStrategy,
     OverlaySettings,
     IgxOverlayService,
-    AbsoluteScrollStrategy
+    AbsoluteScrollStrategy,
+    AutoPositionStrategy
 } from '../../../services/index';
 import { IgxFilteringService, ExpressionUI } from '../grid-filtering.service';
 import {
@@ -114,7 +114,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy, OnInit, A
     private _subMenuOverlaySettings: OverlaySettings = {
         closeOnOutsideClick: true,
         modal: false,
-        positionStrategy: new ConnectedPositioningStrategy(this._subMenuPositionSettings),
+        positionStrategy: new AutoPositionStrategy(this._subMenuPositionSettings),
         scrollStrategy: new AbsoluteScrollStrategy()
     };