fix(datagrid): remove setTimeout and check visibility for calculations

vmware-clarity · Oct 2, 2024 · 787f1b6 · 787f1b6
1 parent 3a4926c
commit 787f1b6
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/projects/angular/clarity.api.md b/projects/angular/clarity.api.md
@@ -5257,7 +5257,7 @@ export class ÇlrDatagridHeaderRenderer implements OnDestroy {
 
 // @public (undocumented)
 export class ÇlrDatagridMainRenderer implements AfterContentInit, AfterViewInit, AfterViewChecked, OnDestroy {
-    constructor(organizer: DatagridRenderOrganizer, items: Items, page: Page, el: ElementRef<HTMLElement>, renderer: Renderer2, detailService: DetailService, tableSizeService: TableSizeService, columnsService: ColumnsService, ngZone: NgZone, keyNavigation: KeyNavigationGridController);
+    constructor(datagrid: ClrDatagrid, organizer: DatagridRenderOrganizer, items: Items, page: Page, domAdapter: DomAdapter, el: ElementRef<HTMLElement>, renderer: Renderer2, detailService: DetailService, tableSizeService: TableSizeService, columnsService: ColumnsService, ngZone: NgZone, keyNavigation: KeyNavigationGridController);
     // (undocumented)
     ngAfterContentInit(): void;
     // (undocumented)

diff --git a/projects/angular/src/data/datagrid/render/main-renderer.ts b/projects/angular/src/data/datagrid/render/main-renderer.ts
@@ -22,6 +22,7 @@ import {
 import { Subscription } from 'rxjs';
 
 import { DomAdapter } from '../../../utils/dom-adapter/dom-adapter';
+import { ClrDatagrid } from '../datagrid';
 import { DatagridColumnChanges } from '../enums/column-changes.enum';
 import { DatagridRenderStep } from '../enums/render-step.enum';
 import { ColumnStateDiff } from '../interfaces/column-state.interface';
@@ -59,6 +60,7 @@ export class DatagridMainRenderer implements AfterContentInit, AfterViewInit, Af
   private _heightSet = false;
   private shouldStabilizeColumns = true;
   private subscriptions: Subscription[] = [];
+  private isVisible = false;
 
   /**
    * Indicates if we want to re-compute columns width. This should only happen:
@@ -68,6 +70,7 @@ export class DatagridMainRenderer implements AfterContentInit, AfterViewInit, Af
   private columnsSizesStable = false;
 
   constructor(
+    private datagrid: ClrDatagrid,
     private organizer: DatagridRenderOrganizer,
     private items: Items,
     private page: Page,
@@ -118,10 +121,9 @@ export class DatagridMainRenderer implements AfterContentInit, AfterViewInit, Af
   }
 
   ngAfterViewChecked() {
-    if (this.shouldStabilizeColumns) {
-      setTimeout(() => {
-        this.stabilizeColumns();
-      }, 0);
+    this.setVisibility();
+    if (this.shouldStabilizeColumns && this.isVisible) {
+      this.stabilizeColumns();
     }
 
     if (this.shouldComputeHeight()) {
@@ -284,4 +286,14 @@ export class DatagridMainRenderer implements AfterContentInit, AfterViewInit, Af
       this.columnsSizesStable = true;
     }
   }
+
+  private setVisibility() {
+    if (this.el.nativeElement.offsetParent) {
+      this.isVisible = true;
+      this.datagrid.datagrid.nativeElement.style.visibility = 'visible';
+    } else {
+      this.isVisible = false;
+      this.datagrid.datagrid.nativeElement.style.visibility = 'hidden';
+    }
+  }
 }