fix(table): Measure column width for sticky columns after new data has rendered.

kseamon · kseamon · commit 120b05cc095f · 2021-11-03T16:58:24.000-04:00
diff --git a/src/cdk/table/table.spec.ts b/src/cdk/table/table.spec.ts
@@ -353,6 +353,7 @@ describe('CdkTable', () => {
   it('should be able to project a caption', fakeAsync(() => {
     setupTableTestApp(NativeHtmlTableWithCaptionApp);
     fixture.detectChanges();
+    flush();
 
     const caption = tableElement.querySelector('caption');
 
@@ -363,6 +364,7 @@ describe('CdkTable', () => {
   it('should be able to project colgroup and col', fakeAsync(() => {
     setupTableTestApp(NativeHtmlTableWithColgroupAndCol);
     fixture.detectChanges();
+    flush();
 
     const colgroupsAndCols = Array.from(tableElement.querySelectorAll('colgroup, col'));
 
diff --git a/src/cdk/table/table.ts b/src/cdk/table/table.ts
@@ -40,6 +40,7 @@ import {
   IterableChangeRecord,
   IterableDiffer,
   IterableDiffers,
+  NgZone,
   OnDestroy,
   OnInit,
   Optional,
@@ -525,6 +526,12 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
     @SkipSelf()
     @Inject(STICKY_POSITIONING_LISTENER)
     protected readonly _stickyPositioningListener: StickyPositioningListener,
+    /**
+     * @deprecated `_ngZone` parameter to become required.
+     * @breaking-change 14.0.0
+     */
+    @Optional()
+    protected readonly _ngZone: NgZone,
   ) {
     if (!role) {
       this._elementRef.nativeElement.setAttribute('role', 'table');
@@ -666,7 +673,20 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
     });
 
     this._updateNoDataRow();
-    this.updateStickyColumnStyles();
+
+    // Allow the new row data to render before measuring it.
+    // TODO: Remove indirection once _ngZone is required.
+    const deferredUpdateStickyColumnStyles = () => {
+      setTimeout(() => {
+        this.updateStickyColumnStyles();
+      }, 0);
+    };
+
+    if (this._ngZone) {
+      this._ngZone.runOutsideAngular(deferredUpdateStickyColumnStyles);
+    } else {
+      deferredUpdateStickyColumnStyles();
+    }
 
     this.contentChanged.next();
   }
diff --git a/src/material-experimental/column-resize/column-resize.spec.ts b/src/material-experimental/column-resize/column-resize.spec.ts
@@ -1,5 +1,5 @@
 import {Component, Directive, ElementRef, ViewChild, ChangeDetectionStrategy} from '@angular/core';
-import {ComponentFixture, TestBed, fakeAsync, flushMicrotasks} from '@angular/core/testing';
+import {ComponentFixture, TestBed, fakeAsync, flush, flushMicrotasks} from '@angular/core/testing';
 import {BidiModule} from '@angular/cdk/bidi';
 import {DataSource} from '@angular/cdk/collections';
 import {dispatchKeyboardEvent} from '../../cdk/testing/private';
@@ -367,6 +367,7 @@ describe('Material Popover Edit', () => {
         component = fixture.componentInstance;
         fixture.detectChanges();
         flushMicrotasks();
+        flush();
       }));
 
       it('shows resize handle overlays on header row hover and while a resize handle is in use', fakeAsync(() => {
diff --git a/src/material-experimental/mdc-table/table.spec.ts b/src/material-experimental/mdc-table/table.spec.ts
@@ -3,6 +3,7 @@ import {
   waitForAsync,
   ComponentFixture,
   fakeAsync,
+  flush,
   flushMicrotasks,
   TestBed,
   tick,
@@ -214,6 +215,7 @@ describe('MDC-based MatTable', () => {
 
     const stuckCellElement = fixture.nativeElement.querySelector('table th')!;
     expect(stuckCellElement.classList).toContain('mat-mdc-table-sticky');
+    flush();
   }));
 
   // Note: needs to be fakeAsync so it catches the error.
@@ -242,6 +244,7 @@ describe('MDC-based MatTable', () => {
     beforeEach(fakeAsync(() => {
       fixture = TestBed.createComponent(ArrayDataSourceMatTableApp);
       fixture.detectChanges();
+      flush();
 
       tableElement = fixture.nativeElement.querySelector('table');
       component = fixture.componentInstance;
@@ -322,6 +325,7 @@ describe('MDC-based MatTable', () => {
         ['a_1', 'b_1', 'c_1'],
         ['Footer A', 'Footer B', 'Footer C'],
       ]);
+      flush();
 
       flushMicrotasks(); // Resolve promise that updates paginator's length
       expect(dataSource.paginator!.length).toBe(1);
@@ -336,6 +340,7 @@ describe('MDC-based MatTable', () => {
         ['a_2', 'b_2', 'c_2'],
         ['Footer A', 'Footer B', 'Footer C'],
       ]);
+      flush();
 
       // Change filter to empty string, should match all rows
       dataSource.filter = '';
@@ -351,6 +356,7 @@ describe('MDC-based MatTable', () => {
         ['a_3', 'b_3', 'c_3'],
         ['Footer A', 'Footer B', 'Footer C'],
       ]);
+      flush();
 
       // Change filter function and filter, should match to rows with zebra.
       dataSource.filterPredicate = (data, filter) => {
@@ -378,6 +384,7 @@ describe('MDC-based MatTable', () => {
         ['a_2', 'b_2', 'c_2'],
         ['Footer A', 'Footer B', 'Footer C'],
       ]);
+      flush();
 
       // Change the filter to a falsy value that might come in from the view.
       dataSource.filter = 0 as any;
@@ -386,6 +393,7 @@ describe('MDC-based MatTable', () => {
         ['Column A', 'Column B', 'Column C'],
         ['Footer A', 'Footer B', 'Footer C'],
       ]);
+      flush();
     }));
 
     it('should not match concatenated words', fakeAsync(() => {
@@ -398,6 +406,7 @@ describe('MDC-based MatTable', () => {
         ['Column A', 'Column B', 'Column C'],
         ['Footer A', 'Footer B', 'Footer C'],
       ]);
+      flush();
     }));
 
     it('should be able to sort the table contents', () => {
@@ -547,6 +556,7 @@ describe('MDC-based MatTable', () => {
         ['a_5', 'b_5', 'c_5'],
         ['Footer A', 'Footer B', 'Footer C'],
       ]);
+      flush();
 
       // Navigate to the next page
       component.paginator.nextPage();
@@ -560,6 +570,7 @@ describe('MDC-based MatTable', () => {
         ['a_10', 'b_10', 'c_10'],
         ['Footer A', 'Footer B', 'Footer C'],
       ]);
+      flush();
     }));
 
     it('should sort strings with numbers larger than MAX_SAFE_INTEGER correctly', () => {
diff --git a/src/material/table/table.spec.ts b/src/material/table/table.spec.ts
@@ -4,6 +4,7 @@ import {
   waitForAsync,
   ComponentFixture,
   fakeAsync,
+  flush,
   flushMicrotasks,
   TestBed,
   tick,
@@ -203,6 +204,7 @@ describe('MatTable', () => {
     const fixture = TestBed.createComponent(StickyTableApp);
     fixture.detectChanges();
     flushMicrotasks();
+    flush();
 
     const stuckCellElement = fixture.nativeElement.querySelector('.mat-table th')!;
     expect(stuckCellElement.classList).toContain('mat-table-sticky');
@@ -227,6 +229,7 @@ describe('MatTable', () => {
     beforeEach(fakeAsync(() => {
       fixture = TestBed.createComponent(ArrayDataSourceMatTableApp);
       fixture.detectChanges();
+      flush();
 
       tableElement = fixture.nativeElement.querySelector('.mat-table');
       component = fixture.componentInstance;
@@ -300,13 +303,15 @@ describe('MatTable', () => {
       // Change filter to a_1, should match one row
       dataSource.filter = 'a_1';
       fixture.detectChanges();
+      flush();
       expect(dataSource.filteredData.length).toBe(1);
       expect(dataSource.filteredData[0]).toBe(dataSource.data[0]);
       expectTableToMatchContent(tableElement, [
         ['Column A', 'Column B', 'Column C'],
         ['a_1', 'b_1', 'c_1'],
         ['Footer A', 'Footer B', 'Footer C'],
       ]);
+      flush();
 
       flushMicrotasks(); // Resolve promise that updates paginator's length
       expect(dataSource.paginator!.length).toBe(1);
@@ -321,6 +326,7 @@ describe('MatTable', () => {
         ['a_2', 'b_2', 'c_2'],
         ['Footer A', 'Footer B', 'Footer C'],
       ]);
+      flush();
 
       // Change filter to empty string, should match all rows
       dataSource.filter = '';
@@ -336,6 +342,7 @@ describe('MatTable', () => {
         ['a_3', 'b_3', 'c_3'],
         ['Footer A', 'Footer B', 'Footer C'],
       ]);
+      flush();
 
       // Change filter function and filter, should match to rows with zebra.
       dataSource.filterPredicate = (data, filter) => {
@@ -363,6 +370,7 @@ describe('MatTable', () => {
         ['a_2', 'b_2', 'c_2'],
         ['Footer A', 'Footer B', 'Footer C'],
       ]);
+      flush();
 
       // Change the filter to a falsy value that might come in from the view.
       dataSource.filter = 0 as any;
@@ -371,13 +379,15 @@ describe('MatTable', () => {
         ['Column A', 'Column B', 'Column C'],
         ['Footer A', 'Footer B', 'Footer C'],
       ]);
+      flush();
     }));
 
     it('should not match concatenated words', fakeAsync(() => {
       // Set the value to the last character of the first
       // column plus the first character of the second column.
       dataSource.filter = '1b';
       fixture.detectChanges();
+      flush();
       expect(dataSource.filteredData.length).toBe(0);
       expectTableToMatchContent(tableElement, [
         ['Column A', 'Column B', 'Column C'],
@@ -523,6 +533,7 @@ describe('MatTable', () => {
       }
       fixture.detectChanges();
       flushMicrotasks(); // Resolve promise that updates paginator's length
+      flush();
       expectTableToMatchContent(tableElement, [
         ['Column A', 'Column B', 'Column C'],
         ['a_1', 'b_1', 'c_1'],
@@ -536,6 +547,7 @@ describe('MatTable', () => {
       // Navigate to the next page
       component.paginator.nextPage();
       fixture.detectChanges();
+      flush();
       expectTableToMatchContent(tableElement, [
         ['Column A', 'Column B', 'Column C'],
         ['a_6', 'b_6', 'c_6'],
diff --git a/tools/public_api_guard/cdk/table.md b/tools/public_api_guard/cdk/table.md
@@ -297,7 +297,8 @@ export class CdkRowDef<T> extends BaseRowDef {
 // @public
 export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDestroy, OnInit {
     constructor(_differs: IterableDiffers, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef, role: string, _dir: Directionality, _document: any, _platform: Platform, _viewRepeater: _ViewRepeater<T, RenderRow<T>, RowContext<T>>, _coalescedStyleScheduler: _CoalescedStyleScheduler, _viewportRuler: ViewportRuler,
-    _stickyPositioningListener: StickyPositioningListener);
+    _stickyPositioningListener: StickyPositioningListener,
+    _ngZone: NgZone);
     addColumnDef(columnDef: CdkColumnDef): void;
     addFooterRowDef(footerRowDef: CdkFooterRowDef): void;
     addHeaderRowDef(headerRowDef: CdkHeaderRowDef): void;
@@ -344,6 +345,8 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
     ngOnDestroy(): void;
     // (undocumented)
     ngOnInit(): void;
+    // @deprecated (undocumented)
+    protected readonly _ngZone: NgZone;
     _noDataRow: CdkNoDataRow;
     // (undocumented)
     _noDataRowOutlet: NoDataRowOutlet;
@@ -372,7 +375,7 @@ export class CdkTable<T> implements AfterContentChecked, CollectionViewer, OnDes
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<CdkTable<any>, "cdk-table, table[cdk-table]", ["cdkTable"], { "trackBy": "trackBy"; "dataSource": "dataSource"; "multiTemplateDataRows": "multiTemplateDataRows"; "fixedLayout": "fixedLayout"; }, { "contentChanged": "contentChanged"; }, ["_noDataRow", "_contentColumnDefs", "_contentRowDefs", "_contentHeaderRowDefs", "_contentFooterRowDefs"], ["caption", "colgroup, col"]>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<CdkTable<any>, [null, null, null, { attribute: "role"; }, { optional: true; }, null, null, null, null, null, { optional: true; skipSelf: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CdkTable<any>, [null, null, null, { attribute: "role"; }, { optional: true; }, null, null, null, null, null, { optional: true; skipSelf: true; }, { optional: true; }]>;
 }
 
 // @public (undocumented)
