Merge branch 'nalipiev/drag-rowSelect-setters' of https://github.com/IgniteUI/igniteui-angular into nalipiev/drag-rowSelect-setters

Author: Lipata

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

@@ -71,7 +71,7 @@ export class IgxExcelStyleSearchComponent {
     }
 
     public get itemSize() {
-        let itemSize = '50px';
+        let itemSize = '48px';
         switch (this.displayDensity) {
             case DisplayDensity.cosy: itemSize = '32px'; break;
             case DisplayDensity.compact: itemSize = '28px'; break;

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -3552,6 +3552,50 @@ describe('IgxGrid - Filtering actions - Excel style filtering', () => {
         const listItems = displayContainer.querySelectorAll('igx-list-item');
         expect(listItems.length).toBe(10, 'incorrect rendered list items count');
     }));
+
+    it('should correctly display all items in search list after filtering it', (async() => {
+        // Add additional rows as prerequisite for the test
+        for (let index = 0; index < 5; index++) {
+            const newRow = {
+                Downloads: index,
+                ID: index + 100,
+                ProductName: 'New Sales Product ' + index,
+                ReleaseDate: new Date(),
+                Released: false,
+                AnotherField: 'z'
+            };
+            grid.addRow(newRow);
+        }
+        fix.detectChanges();
+
+        // Open excel style filtering component
+        GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
+        await wait(200);
+        fix.detectChanges();
+
+        // Scroll the search list to the middle.
+        const gridNativeElement = fix.debugElement.query(By.css('igx-grid')).nativeElement;
+        const excelMenu = gridNativeElement.querySelector('.igx-excel-filter__menu');
+        const searchComponent = excelMenu.querySelector('.igx-excel-filter__menu-main');
+        const displayContainer = searchComponent.querySelector('igx-display-container');
+        const scrollbar = searchComponent.querySelector('igx-virtual-helper');
+        scrollbar.scrollTop = (<HTMLElement>displayContainer).getBoundingClientRect().height / 2;
+        await wait(200);
+        fix.detectChanges();
+
+        // Type string in search box
+        const inputNativeElement = searchComponent.querySelector('.igx-input-group__input');
+        sendInputNativeElement(inputNativeElement, 'sale', fix);
+        await wait(200);
+        fix.detectChanges();
+
+        // Verify the display container is within the bounds of the list
+        const displayContainerRect = displayContainer.getBoundingClientRect();
+        const listNativeElement = searchComponent.querySelector('.igx-list');
+        const listRect = listNativeElement.getBoundingClientRect();
+        expect(displayContainerRect.top >= listRect.top).toBe(true, 'displayContainer starts above list');
+        expect(displayContainerRect.bottom <= listRect.bottom).toBe(true, 'displayContainer ends below list');
+    }));
 });
 
 const expectedResults = [];
@@ -3564,6 +3608,14 @@ function sendInput(element, text, fix) {
     fix.detectChanges();
 }
 
+function sendInputNativeElement(nativeElement, text, fix) {
+    nativeElement.value = text;
+    nativeElement.dispatchEvent(new Event('keydown'));
+    nativeElement.dispatchEvent(new Event('input'));
+    nativeElement.dispatchEvent(new Event('keyup'));
+    fix.detectChanges();
+}
+
 function verifyFilterUIPosition(filterUIContainer, grid) {
     const filterUiRightBorder = filterUIContainer.nativeElement.offsetParent.offsetLeft +
         filterUIContainer.nativeElement.offsetLeft + filterUIContainer.nativeElement.offsetWidth;