From 137a1005dbcd24d85ffccddfa7887e4aad6b4a60 Mon Sep 17 00:00:00 2001 From: Maya Date: Thu, 16 May 2024 16:48:45 +0300 Subject: [PATCH] =?UTF-8?q?fix(igxGrid):=20Fix=20timing=20issue=20between?= =?UTF-8?q?=20forof=20resetting=20and=20the=20grid=20h=E2=80=A6=20(#14080)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/directives/for-of/for_of.directive.ts | 27 +++++++++++-------- .../src/lib/grids/grid-base.directive.ts | 24 +++++++++++++---- .../lib/grids/grid/grid-keyBoardNav.spec.ts | 2 ++ .../src/lib/grids/grid/grid.component.spec.ts | 1 + .../lib/grids/grid/row-drag.directive.spec.ts | 1 + .../hierarchical-grid.integration.spec.ts | 1 + .../pivot-grid/pivot-header-row.component.ts | 2 +- 7 files changed, 41 insertions(+), 17 deletions(-) diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts index 929d2f190a3..b261e590a9c 100644 --- a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts @@ -546,7 +546,9 @@ export class IgxForOfDirective extends IgxForOfToken extends IgxForOfToken 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 extends IgxForOfToken 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}); } } diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index b9679bfc962..607d6442961 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/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(); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-keyBoardNav.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-keyBoardNav.spec.ts index 6289fd1901d..98865bad8c4 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-keyBoardNav.spec.ts +++ b/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(); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts index 63bc6d7c805..dc0216e8c0c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts +++ b/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; diff --git a/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts index 36217c635f8..6ab79ead6fa 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/row-drag.directive.spec.ts +++ b/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)); diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts index ba01eb3d785..4949a08b99a 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts +++ b/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); diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts index 5d48c35e4ad..4557ba01a02 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts +++ b/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>; public override get headerForOf() { - return this.headerContainers.last; + return this.headerContainers?.last; } constructor(