fix(igxGrid): Fix timing issue between forof resetting and the grid h… (#14080)

Author: MayaKirova

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

@@ -546,7 +546,9 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
         }
         const containerSize = 'igxForContainerSize';
         if (containerSize in changes && !changes[containerSize].firstChange && this.igxForOf) {
-            this._recalcOnContainerChange();
+            const prevSize = parseInt(changes[containerSize].previousValue, 10);
+            const newSize = parseInt(changes[containerSize].currentValue, 10);
+            this._recalcOnContainerChange({prevSize, newSize});
         }
     }
 
@@ -1316,24 +1318,25 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
         return end;
     }
 
-    protected _recalcScrollBarSize() {
+    protected _recalcScrollBarSize(containerSizeInfo = null) {
         const count = this.isRemote ? this.totalItemCount : (this.igxForOf ? this.igxForOf.length : 0);
         this.dc.instance.notVirtual = !(this.igxForContainerSize && this.dc && this.state.chunkSize < count);
-        const scrollable = this.isScrollable();
+        const scrollable = containerSizeInfo ? this.scrollComponent.size > containerSizeInfo.prevSize : this.isScrollable();
         if (this.igxForScrollOrientation === 'horizontal') {
             const totalWidth = parseInt(this.igxForContainerSize, 10) > 0 ? this._calcSize() : 0;
-            this.scrollComponent.nativeElement.style.width = this.igxForContainerSize + 'px';
-            this.scrollComponent.size = totalWidth;
             if (totalWidth <= parseInt(this.igxForContainerSize, 10)) {
                 this.resetScrollPosition();
             }
+            this.scrollComponent.nativeElement.style.width = this.igxForContainerSize + 'px';
+            this.scrollComponent.size = totalWidth;
         }
         if (this.igxForScrollOrientation === 'vertical') {
-            this.scrollComponent.nativeElement.style.height = parseInt(this.igxForContainerSize, 10) + 'px';
-            this.scrollComponent.size = this._calcSize();
-            if (this.scrollComponent.size <= parseInt(this.igxForContainerSize, 10)) {
+            const totalHeight = this._calcSize();
+            if (totalHeight <= parseInt(this.igxForContainerSize, 10)) {
                 this.resetScrollPosition();
             }
+            this.scrollComponent.nativeElement.style.height = parseInt(this.igxForContainerSize, 10) + 'px';
+            this.scrollComponent.size = totalHeight;
         }
         if (scrollable !== this.isScrollable()) {
             // scrollbar visibility has changed
@@ -1356,10 +1359,10 @@ export class IgxForOfDirective<T, U extends T[] = T[]> extends IgxForOfToken<T,U
         return size;
     }
 
-    protected _recalcOnContainerChange() {
+    protected _recalcOnContainerChange(containerSizeInfo = null) {
         const prevChunkSize = this.state.chunkSize;
         this.applyChunkSizeChange();
-        this._recalcScrollBarSize();
+        this._recalcScrollBarSize(containerSizeInfo);
         if (prevChunkSize !== this.state.chunkSize) {
             this.chunkLoad.emit(this.state);
         }
@@ -1616,7 +1619,9 @@ export class IgxGridForOfDirective<T, U extends T[] = T[]> extends IgxForOfDirec
         }
         const containerSize = 'igxForContainerSize';
         if (containerSize in changes && !changes[containerSize].firstChange && this.igxForOf) {
-            this._recalcOnContainerChange();
+            const prevSize = parseInt(changes[containerSize].previousValue, 10);
+            const newSize = parseInt(changes[containerSize].currentValue, 10);
+            this._recalcOnContainerChange({prevSize, newSize});
         }
     }
 

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -3617,6 +3617,14 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
             this.cdr.detectChanges();
         });
 
+
+        this.headerContainer?.scrollbarVisibilityChanged.pipe(filter(() => !this._init), destructor).subscribe(() => {
+            // the horizontal scrollbar showing/hiding
+            // update scrollbar visibility and recalc heights
+            this.notifyChanges(true);
+            this.cdr.detectChanges();
+        });
+
         this.verticalScrollContainer.contentSizeChange.pipe(filter(() => !this._init), throttleTime(30), destructor).subscribe(() => {
             this.notifyChanges(true);
         });
@@ -4225,10 +4233,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     /**
      * @hidden @internal
      */
-    public get isHorizontalScrollHidden() {
-        const diff = this.unpinnedWidth - this.totalWidth;
-        return this.width === null || diff >= 0;
-    }
+    public isHorizontalScrollHidden = false;
 
     /**
      * @hidden @internal
@@ -6071,7 +6076,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
      * @hidden @internal
      */
     public hasHorizontalScroll() {
-        return this.totalWidth - this.unpinnedWidth > 0;
+        return this.totalWidth - this.unpinnedWidth > 0 && this.width !== null;
     }
 
     /**
@@ -6651,6 +6656,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         this.resetCaches(recalcFeatureWidth);
 
         const hasScroll = this.hasVerticalScroll();
+        const hasHScroll = !this.isHorizontalScrollHidden;
         this.calculateGridWidth();
         this.resetCaches(recalcFeatureWidth);
         this.cdr.detectChanges();
@@ -6670,6 +6676,14 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
             this.calculateGridWidth();
             this.cdr.detectChanges();
         }
+
+        // in case horizontal scrollbar has appeared recalc to size correctly.
+        if (hasHScroll !== this.hasHorizontalScroll()) {
+            this.isHorizontalScrollHidden = !this.hasHorizontalScroll();
+            this.cdr.detectChanges();
+            this.calculateGridHeight();
+            this.cdr.detectChanges();
+        }
         if (this.zone.isStable) {
             this.zone.run(() => {
                 this._applyWidthHostBinding();

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

@@ -514,6 +514,8 @@ describe('IgxGrid - Keyboard navigation #grid', () => {
             fix.detectChanges();
 
             fix.componentInstance.columns = fix.componentInstance.generateCols(100);
+            await wait(DEBOUNCETIME);
+            fix.detectChanges();
             fix.componentInstance.data = fix.componentInstance.generateData(1000);
             fix.detectChanges();
 

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

@@ -1451,6 +1451,7 @@ describe('IgxGrid Component Tests #grid', () => {
                 fix.componentInstance.initColumnsRows(5, 5);
                 fix.detectChanges();
                 await wait(16);
+                fix.detectChanges();
                 expect(fix.componentInstance.isHorizonatScrollbarVisible()).toBe(true);
                 const scrollbar = grid.headerContainer.getScroll();
                 scrollbar.scrollLeft = 10000;

projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts

@@ -260,6 +260,7 @@ describe('Row Drag Tests', () => {
                     fixture.detectChanges();
 
                     // selectable rows disabled
+                    fixture.detectChanges();
                     let horizontalScrollbarElement: DebugElement = fixture.debugElement.query(By.css(CSS_CLASS_VIRTUAL_HSCROLLBAR));
                     let horizontalScrollbarRect = horizontalScrollbarElement.nativeElement.getBoundingClientRect();
                     let pinnedColumnHeaderElement: DebugElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_LAST_PINNED_HEADER));

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts

@@ -302,6 +302,7 @@ describe('IgxHierarchicalGrid Integration #hGrid', () => {
             const childGrid = hierarchicalGrid.gridAPI.getChildGrids(false)[0];
             childGrid.columns[0].sortable = true;
             fixture.detectChanges();
+            childGrid.cdr.detectChanges();
 
             const childHeader = GridFunctions.getColumnHeader('ID', fixture, childGrid);
             GridFunctions.clickHeaderSortIcon(childHeader);

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts

@@ -112,7 +112,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
     public headerContainers: QueryList<IgxGridForOfDirective<ColumnType, ColumnType[]>>;
 
     public override get headerForOf() {
-        return this.headerContainers.last;
+        return this.headerContainers?.last;
     }
 
     constructor(