Use auto position strategy for grid toolbar dropdowns (#16429)

Author: wnvko

projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts

@@ -3,14 +3,13 @@ import {
     Directive,
     ElementRef,
     EventEmitter,
-    HostBinding,
     HostListener,
     Inject,
     Input,
     OnDestroy,
     OnInit,
     Optional,
-    Output
+    Output,
 } from '@angular/core';
 import { AbsoluteScrollStrategy } from '../../services/overlay/scroll/absolute-scroll-strategy';
 import { CancelableBrowserEventArgs, IBaseEventArgs, PlatformUtil } from '../../core/utils';
@@ -34,7 +33,13 @@ export interface ToggleViewCancelableEventArgs extends ToggleViewEventArgs, Canc
 @Directive({
     exportAs: 'toggle',
     selector: '[igxToggle]',
-    standalone: true
+    standalone: true,
+    host: {
+        '[class.igx-toggle--hidden]': 'hiddenClass',
+        '[attr.aria-hidden]': 'hiddenClass',
+        '[class.igx-toggle--hidden-webkit]': 'hiddenWebkitClass',
+        '[class.igx-toggle]': 'defaultClass'
+    }
 })
 export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
     /**
@@ -159,13 +164,13 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
     /**
      * @hidden
      */
-    @HostBinding('class.igx-toggle--hidden')
-    @HostBinding('attr.aria-hidden')
     public get hiddenClass() {
         return this.collapsed;
     }
 
-    @HostBinding('class.igx-toggle--hidden-webkit')
+    /**
+     * @hidden
+     */
     public get hiddenWebkitClass() {
         const isSafari = this.platform?.isSafari;
         const browserVersion = this.platform?.browserVersion;
@@ -176,7 +181,6 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
     /**
      * @hidden
      */
-    @HostBinding('class.igx-toggle')
     public get defaultClass() {
         return !this.collapsed;
     }
@@ -224,6 +228,16 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
         }
 
         this._collapsed = false;
+
+        // TODO: this is a workaround for the issue introduced by Angular's with Ivy renderer.
+        // When calling detectChanges(), Angular marks the element for check, but does not update the classes
+        // immediately, which causes the overlay to calculate incorrect dimensions of target element.
+        // Overlay show should be called in the next tick to ensure the classes are updated and target element is measured correctly.
+        // Note: across the codebase, each host binding should be checked and similar fix applied if needed!!!
+        this.elementRef.nativeElement.className = this.elementRef.nativeElement.className.replace('igx-toggle--hidden', 'igx-toggle');
+        this.elementRef.nativeElement.className = this.elementRef.nativeElement.className.replace('igx-toggle--hidden-webkit', 'igx-toggle');
+        this.elementRef.nativeElement.removeAttribute('aria-hidden');
+
         this.cdr.detectChanges();
 
         if (!info) {

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

@@ -9,7 +9,7 @@ import { IgxColumnActionsComponent } from '../column-actions/column-actions.comp
 import { IgxToggleDirective, ToggleViewCancelableEventArgs, ToggleViewEventArgs } from '../../directives/toggle/toggle.directive';
 import { HorizontalAlignment, OverlaySettings, VerticalAlignment } from '../../services/overlay/utilities';
 import { IgxToolbarToken } from './token';
-import { ConnectedPositioningStrategy } from '../../services/overlay/position/connected-positioning-strategy';
+import { AutoPositionStrategy } from '../../services/overlay/position/auto-position-strategy';
 
 /* blazorInclude */
 /* blazorElement */
@@ -88,7 +88,7 @@ export abstract class BaseToolbarDirective implements OnDestroy {
     private $sub: Subscription;
 
     private _overlaySettings: OverlaySettings = {
-        positionStrategy: new ConnectedPositioningStrategy({
+        positionStrategy: new AutoPositionStrategy({
             horizontalDirection: HorizontalAlignment.Left,
             horizontalStartPoint: HorizontalAlignment.Right,
             verticalDirection: VerticalAlignment.Bottom,

projects/igniteui-angular/src/lib/services/overlay/overlay.ts

@@ -431,12 +431,18 @@ export class IgxOverlayService implements OnDestroy {
             }
         }
         this.updateSize(info);
+        const openAnimation = info.settings.positionStrategy.settings.openAnimation;
+        const closeAnimation = info.settings.positionStrategy.settings.closeAnimation;
         info.settings.positionStrategy.position(
             info.elementRef.nativeElement.parentElement,
             { width: info.initialSize.width, height: info.initialSize.height },
             this._document,
             true,
             info.settings.target);
+        if (openAnimation !== info.settings.positionStrategy.settings.openAnimation ||
+            closeAnimation !== info.settings.positionStrategy.settings.closeAnimation){
+                this.buildAnimationPlayers(info);
+            }
         this.addModalClasses(info);
         if (info.settings.positionStrategy.settings.openAnimation) {
             // TODO: should we build players again. This was already done in attach!!!