fix(grid): position toolbar drop downs correctly - 20.1.x

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

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, Inject, booleanAttribute } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, Output, EventEmitter, Inject, booleanAttribute } from '@angular/core';
 import { first } from 'rxjs/operators';
 import { BaseToolbarDirective } from './grid-toolbar.base';
 import { IgxExcelTextDirective, IgxCSVTextDirective } from './common';
@@ -94,8 +94,9 @@ export class IgxGridToolbarExporterComponent extends BaseToolbarDirective {
         @Inject(IgxToolbarToken) toolbar: IgxToolbarToken,
         private excelExporter: IgxExcelExporterService,
         private csvExporter: IgxCsvExporterService,
+        cdr: ChangeDetectorRef,
     ) {
-        super(toolbar);
+        super(toolbar, cdr);
     }
 
     protected exportClicked(type: 'excel' | 'csv', toggleRef?: IgxToggleDirective) {

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

@@ -1,15 +1,15 @@
-import { Directive, Input, EventEmitter, OnDestroy, Output, Inject, booleanAttribute } from '@angular/core';
+import { booleanAttribute, ChangeDetectorRef, Directive, EventEmitter, Inject, Input, OnDestroy, Output } from '@angular/core';
 import { Subject, Subscription } from 'rxjs';
 import { first, takeUntil } from 'rxjs/operators';
 
+import { IgxToggleDirective, ToggleViewCancelableEventArgs, ToggleViewEventArgs } from '../../directives/toggle/toggle.directive';
+import { AutoPositionStrategy } from '../../services/overlay/position/auto-position-strategy';
 import { AbsoluteScrollStrategy } from '../../services/overlay/scroll/absolute-scroll-strategy';
+import { HorizontalAlignment, OverlaySettings, VerticalAlignment } from '../../services/overlay/utilities';
+import { IgxColumnActionsComponent } from '../column-actions/column-actions.component';
 import { ColumnDisplayOrder } from '../common/enums';
 import { IColumnToggledEventArgs } from '../common/events';
-import { IgxColumnActionsComponent } from '../column-actions/column-actions.component';
-import { IgxToggleDirective, ToggleViewCancelableEventArgs, ToggleViewEventArgs } from '../../directives/toggle/toggle.directive';
-import { HorizontalAlignment, OverlaySettings, VerticalAlignment } from '../../services/overlay/utilities';
 import { IgxToolbarToken } from './token';
-import { AutoPositionStrategy } from '../../services/overlay/position/auto-position-strategy';
 
 /* blazorInclude */
 /* blazorElement */
@@ -22,6 +22,7 @@ import { AutoPositionStrategy } from '../../services/overlay/position/auto-posit
  */
 @Directive()
 export abstract class BaseToolbarDirective implements OnDestroy {
+
     /**
      * Sets the height of the column list in the dropdown.
      */
@@ -108,7 +109,10 @@ export abstract class BaseToolbarDirective implements OnDestroy {
         return this.toolbar.grid;
     }
 
-    constructor(@Inject(IgxToolbarToken) protected toolbar: IgxToolbarToken) { }
+    constructor(
+        @Inject(IgxToolbarToken) protected toolbar: IgxToolbarToken,
+        private cdr: ChangeDetectorRef
+    ) { }
 
     /** @hidden @internal **/
     public ngOnDestroy() {
@@ -120,11 +124,18 @@ export abstract class BaseToolbarDirective implements OnDestroy {
     public toggle(anchorElement: HTMLElement, toggleRef: IgxToggleDirective, actions?: IgxColumnActionsComponent): void {
         if (actions) {
             this._setupListeners(toggleRef, actions);
-            const setHeight = () =>
+            const setHeight = () => {
                 actions.columnsAreaMaxHeight = actions.columnsAreaMaxHeight !== '100%'
                     ? actions.columnsAreaMaxHeight :
                     this.columnListHeight ??
                     `${Math.max(this.grid.calcHeight * 0.5, 200)}px`;
+                    // TODO: this is a workaround for the issue introduced by Angular's Ivy renderer.
+                    // This was fixed in ToggleDirective by PR16429. However, the fix there introduced the
+                    // issue here. To fix this in IgxColumnActionsComponent we need to set the height after
+                    // the toggle is opened and the classes are applied to ensure the height is calculated
+                    // correctly.
+                    this.cdr.detectChanges();
+            }
             toggleRef.opening.pipe(first()).subscribe(setHeight);
         }
         toggleRef.toggle({

projects/igniteui-angular/src/lib/services/excel/excel-exporter.ts

@@ -160,7 +160,7 @@ export class IgxExcelExporterService extends IgxBaseExporter {
     }
 
     private saveFile(data: Uint8Array, fileName: string): void {
-        const blob = new Blob([data], {
+        const blob = new Blob([data as BlobPart], {
             type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
         });