fix(toggle): use workaround to apply host bound classes and attributes

Author: wnvko

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

@@ -1,19 +1,15 @@
 import {
-    afterNextRender,
     ChangeDetectorRef,
     Directive,
     ElementRef,
     EventEmitter,
     HostListener,
-    inject,
     Inject,
-    Injector,
     Input,
     OnDestroy,
     OnInit,
     Optional,
     Output,
-    runInInjectionContext
 } from '@angular/core';
 import { AbsoluteScrollStrategy } from '../../services/overlay/scroll/absolute-scroll-strategy';
 import { CancelableBrowserEventArgs, IBaseEventArgs, PlatformUtil } from '../../core/utils';
@@ -201,7 +197,6 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
     private _overlayClosingSub: Subscription;
     private _overlayClosedSub: Subscription;
     private _overlayContentAppendedSub: Subscription;
-    private _injector = inject(Injector);
 
     /**
      * @hidden
@@ -234,27 +229,34 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
 
         this._collapsed = false;
 
-        runInInjectionContext(this._injector, () =>{
-            afterNextRender(() => {
-                if (!info) {
-                    this.unsubscribe();
-                    this.subscribe();
-                    this._overlayId = this.overlayService.attach(this.elementRef, overlaySettings);
-                }
+        // 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');
 
-                const args: ToggleViewCancelableEventArgs = { cancel: false, owner: this, id: this._overlayId };
-                this.opening.emit(args);
-                if (args.cancel) {
-                    this.unsubscribe();
-                    this.overlayService.detach(this._overlayId);
-                    this._collapsed = true;
-                    delete this._overlayId;
-                    this.cdr.detectChanges();
-                    return;
-                }
-                this.overlayService.show(this._overlayId, overlaySettings);
-            });
-        });
+        this.cdr.detectChanges();
+
+        if (!info) {
+            this.unsubscribe();
+            this.subscribe();
+            this._overlayId = this.overlayService.attach(this.elementRef, overlaySettings);
+        }
+
+        const args: ToggleViewCancelableEventArgs = { cancel: false, owner: this, id: this._overlayId };
+        this.opening.emit(args);
+        if (args.cancel) {
+            this.unsubscribe();
+            this.overlayService.detach(this._overlayId);
+            this._collapsed = true;
+            delete this._overlayId;
+            this.cdr.detectChanges();
+            return;
+        }
+        this.overlayService.show(this._overlayId, overlaySettings);
     }
 
     /**

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

@@ -431,13 +431,19 @@ 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);
-        this.addModalClasses(info);
+        if (openAnimation !== info.settings.positionStrategy.settings.openAnimation ||
+            closeAnimation !== info.settings.positionStrategy.settings.closeAnimation){
+                this.addModalClasses(info);
+            }
+        this.buildAnimationPlayers(info);
         if (info.settings.positionStrategy.settings.openAnimation) {
             // TODO: should we build players again. This was already done in attach!!!
             // this.buildAnimationPlayers(info);