fix(for-of): correct virtualized sizing for bordered lists (#17496)

Author: viktorkombov

projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.spec.ts

@@ -358,6 +358,38 @@ describe('IgxForOf directive -', () => {
             expect(cache).toEqual([130, 100, 100, 100, 100, 100, 100, 130, 130, 130]);
         });
 
+        it('should take item borders and margins into account when calculating its size', () => {
+            const virtualContainer = fix.componentInstance.parentVirtDir;
+            const node = document.createElement('div');
+            node.style.width = '100px';
+            node.style.height = '80px';
+            node.style.border = '2px solid transparent';
+            node.style.margin = '3px 5px 7px 11px';
+            fix.nativeElement.appendChild(node);
+
+            virtualContainer.igxForScrollOrientation = 'vertical';
+            const verticalSize = node.getBoundingClientRect().height + 3 + 7;
+            expect(virtualContainer.testGetNodeSize(node)).toBe(verticalSize);
+
+            virtualContainer.igxForScrollOrientation = 'horizontal';
+            virtualContainer.igxForSizePropName = 'width';
+            const horizontalSize = node.getBoundingClientRect().width + 5 + 11;
+            expect(virtualContainer.testGetNodeSize(node)).toBe(horizontalSize);
+
+            node.remove();
+        });
+
+        it('should preserve valid border sizes when another side cannot be parsed', () => {
+            const virtualContainer = fix.componentInstance.parentVirtDir;
+            const node = document.createElement('div');
+            spyOn(window, 'getComputedStyle').and.returnValue({
+                borderTopWidth: '',
+                borderBottomWidth: '2px'
+            } as CSSStyleDeclaration);
+
+            expect(virtualContainer.testGetBorder(node, 'height')).toBe(2);
+        });
+
         it('should render no more that initial chunk size elements when set if no containerSize', () => {
             fix.componentInstance.height = undefined;
             fix.componentInstance.initialChunkSize = 3;
@@ -1386,6 +1418,14 @@ export class TestIgxForOfDirective<T> extends IgxForOfDirective<T> {
     public testGetHorizontalIndexAt(left, set) {
         super.getIndexAt(left, set);
     }
+
+    public testGetNodeSize(node: Element): number {
+        return super.getNodeSize(node, 0);
+    }
+
+    public testGetBorder(node: Element, dimension: string): number {
+        return super.getBorder(node, dimension);
+    }
 }
 
 /** Empty virtualized component */

projects/igniteui-angular/directives/src/directives/for-of/for_of.directive.ts

@@ -847,8 +847,8 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
         const dimension = this.igxForScrollOrientation === 'horizontal' ?
         this.igxForSizePropName : 'height';
         const nodeSize = dimension === 'height' ?
-            rNode.clientHeight + this.getMargin(rNode, dimension):
-            rNode.clientWidth + this.getMargin(rNode, dimension);
+            rNode.clientHeight + this.getBorder(rNode, dimension) + this.getMargin(rNode, dimension):
+            rNode.clientWidth + this.getBorder(rNode, dimension) + this.getMargin(rNode, dimension);
         return nodeSize;
     }
 
@@ -1565,6 +1565,16 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
         return parseFloat(styles['marginLeft']) +
             parseFloat(styles['marginRight']) || 0;
     }
+
+    protected getBorder(node, dimension: string): number {
+        const styles = window.getComputedStyle(node);
+        if (dimension === 'height') {
+            return (parseFloat(styles['borderTopWidth']) || 0) +
+                (parseFloat(styles['borderBottomWidth']) || 0);
+        }
+        return (parseFloat(styles['borderLeftWidth']) || 0) +
+            (parseFloat(styles['borderRightWidth']) || 0);
+    }
 }
 
 export const getTypeNameForDebugging = (type: any): string => type.name || typeof type;

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

@@ -362,7 +362,7 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
      */
     public get containerSize() {
         if (this.esf.listData.length) {
-            return this.list?.element.nativeElement.offsetHeight;
+            return this.list?.element.nativeElement.clientHeight;
         }
 
         // GE Nov 1st, 2021 #10355 Return a numeric value, so the chunk size is calculated properly.

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

@@ -4086,6 +4086,19 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             expect(listItems.length).toBe(6, 'incorrect rendered list items count');
         });
 
+        it('Should use the list content height for the virtual container size', async () => {
+            GridFunctions.clickExcelFilterIconFromCodeAsync(fix, grid, 'ProductName');
+            fix.detectChanges();
+            await wait(100);
+
+            const searchComponent = fix.debugElement.query(By.css('igx-excel-style-search')).componentInstance;
+            const listElement = searchComponent.list.element.nativeElement as HTMLElement;
+            listElement.style.border = '1px solid transparent';
+
+            expect(listElement.offsetHeight).toBeGreaterThan(listElement.clientHeight);
+            expect(searchComponent.containerSize).toBe(listElement.clientHeight);
+        });
+
         it('Should allow to input commas in excel search component input field when column dataType is number.', async () => {
             GridFunctions.clickExcelFilterIconFromCodeAsync(fix, grid, 'Downloads');
             fix.detectChanges();