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

.github/workflows/nodejs.yml

@@ -72,7 +72,9 @@ jobs:
         run: npm run build
       - name: Bundle Tree-Shake & SSR Test
         run: npm run build:bundletest
+      # TODO: Remove fail-on-error once Coveralls resolves their ongoing issue (https://status.coveralls.io)
       - name: Publish to coveralls.io
         uses: coverallsapp/github-action@v2
         with:
             github-token: ${{ github.token }}
+            fail-on-error: false

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

@@ -1,13 +1,13 @@
-import { Directive, Input, EventEmitter, OnDestroy, Output, booleanAttribute, inject } from '@angular/core';
+import { ChangeDetectorRef, Directive, EventEmitter, Input, OnDestroy, Output, booleanAttribute, inject } from '@angular/core';
 import { Subject, Subscription } from 'rxjs';
 import { first, takeUntil } from 'rxjs/operators';
 
+import { AbsoluteScrollStrategy, AutoPositionStrategy, HorizontalAlignment, OverlaySettings, VerticalAlignment } from 'igniteui-angular/core';
+import { IgxToggleDirective, ToggleViewCancelableEventArgs, ToggleViewEventArgs } from 'igniteui-angular/directives';
+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 { IgxToolbarToken } from './token';
-import { AbsoluteScrollStrategy, AutoPositionStrategy, HorizontalAlignment, OverlaySettings, VerticalAlignment } from 'igniteui-angular/core';
-import { IgxToggleDirective, ToggleViewCancelableEventArgs, ToggleViewEventArgs } from 'igniteui-angular/directives';
 
 /* blazorInclude */
 /* blazorElement */
@@ -21,6 +21,7 @@ import { IgxToggleDirective, ToggleViewCancelableEventArgs, ToggleViewEventArgs
 @Directive()
 export abstract class BaseToolbarDirective implements OnDestroy {
     protected toolbar = inject(IgxToolbarToken);
+    private cdr = inject(ChangeDetectorRef);
 
     /**
      * Sets the height of the column list in the dropdown.
@@ -118,11 +119,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({