fix(grid): position toolbar drop downs correctly

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: Workaround for an Ivy-related issue. The ToggleDirective was adjusted in PR16429,
+                    // which resolved the original problem but caused this side effect for IgxColumnActionsComponent.
+                    // We must set the height during the `opening` phase (after the toggle host classes are applied
+                    // but before the overlay is positioned/shown) so that the height is calculated correctly.
+                    // Revisit this once the underlying issue is fully addressed and the workaround is no longer needed.
+                    this.cdr.detectChanges();
+            }
             toggleRef.opening.pipe(first()).subscribe(setHeight);
         }
         toggleRef.toggle({