fix(overlay): conditionally cache element size

Author: RivaIvanova

projects/igniteui-angular/core/src/services/overlay/overlay.spec.ts

@@ -569,7 +569,8 @@ describe('igxOverlay', () => {
                 scrollStrategy: new NoOpScrollStrategy(),
                 modal: true,
                 closeOnOutsideClick: true,
-                closeOnEscape: false
+                closeOnEscape: false,
+                cacheSize: true
             };
 
             spyOn(overlayInstance.contentAppending, 'emit');
@@ -3506,7 +3507,7 @@ describe('igxOverlay', () => {
         }));
 
         // 4. Css
-        it('Should use component initial container\'s properties when is with 100% width and show in overlay element',
+        it('Should use component initial container\'s properties based on cacheSize when it\'s with 100% width and shown in overlay element',
             fakeAsync(() => {
                 const fixture = TestBed.createComponent(WidthTestOverlayComponent);
                 fixture.detectChanges();
@@ -3525,6 +3526,15 @@ describe('igxOverlay', () => {
                 // content element has no height, so the shown element will calculate its own height by itself
                 // expect(overlayChild.style.height).toEqual('100%');
                 // expect(overlayChild.getBoundingClientRect().height).toEqual(280);
+
+                fixture.componentInstance.overlaySettings.cacheSize = false;
+                fixture.componentInstance.buttonElement.nativeElement.click();
+                tick();
+                const componentElement2 = fixture.componentInstance.customComponent.nativeElement;
+                expect(componentElement2.style.width).toEqual('100%');
+                expect(componentElement2.getBoundingClientRect().width).toEqual(123);
+                // Check overlay content element width
+                expect(componentElement2.parentElement.getBoundingClientRect().width).toEqual(123);
                 fixture.componentInstance.overlay.detachAll();
             }));
     });
@@ -4679,7 +4689,7 @@ export class TwoButtonsComponent {
     <div style="width: 420px; height: 280px;">
         <button class='300_button' igxToggle #button (click)='click($event)'>Show Overlay</button>
         <div #myCustomComponent class="customList" style="width: 100%; height: 100%;">
-            Some Content
+            <p style="width: 123px;">Some Content</p>
         </div>
     </div>`,
     styles: [`button {

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

@@ -130,7 +130,8 @@ export class IgxOverlayService implements OnDestroy {
         scrollStrategy: new NoOpScrollStrategy(),
         modal: true,
         closeOnOutsideClick: true,
-        closeOnEscape: false
+        closeOnEscape: false,
+        cacheSize: true
     };
 
     constructor() {
@@ -331,11 +332,18 @@ export class IgxOverlayService implements OnDestroy {
         info.settings = eventArgs.settings;
         this._overlayInfos.push(info);
         info.hook = this.placeElementHook(info.elementRef.nativeElement);
-        const elementRect = info.elementRef.nativeElement.getBoundingClientRect();
-        info.initialSize = { width: elementRect.width, height: elementRect.height };
+        let elementRect;
+        // Get the element rect size before moving it into the overlay to cache its size.
+        if (info.settings.cacheSize) {
+            elementRect = info.elementRef.nativeElement.getBoundingClientRect();
+        }
         // Get the size before moving the container into the overlay so that it does not forget about inherited styles.
         this.getComponentSize(info);
         this.moveElementToOverlay(info);
+        if (!info.settings.cacheSize) {
+            elementRect = info.elementRef.nativeElement.getBoundingClientRect();
+        }
+        info.initialSize = { width: elementRect.width, height: elementRect.height };
         // Update the container size after moving if there is size.
         if (info.size) {
             info.elementRef.nativeElement.parentElement.style.setProperty('--ig-size', info.size);

projects/igniteui-angular/core/src/services/overlay/utilities.ts

@@ -134,6 +134,11 @@ export interface OverlaySettings {
      * Clicking on the elements in this collection will not close the overlay when closeOnOutsideClick = true.
      */
     excludeFromOutsideClick?: HTMLElement[];
+    /**
+     * @hidden @internal
+     * Set if the element should retain its size when moved to the overlay.
+     */
+    cacheSize?: boolean;
 }
 
 export interface OverlayEventArgs extends IBaseEventArgs {

projects/igniteui-angular/directives/src/directives/notification/notifications.directive.ts

@@ -86,7 +86,8 @@ export abstract class IgxNotificationsDirective extends IgxToggleDirective
             closeOnEscape: false,
             closeOnOutsideClick: false,
             modal: false,
-            outlet: this.outlet
+            outlet: this.outlet,
+            cacheSize: false
         };
 
         super.open(overlaySettings);

projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts

@@ -400,6 +400,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
         this._overlayDefaults.positionStrategy = new TooltipPositionStrategy(this._positionSettings);
         this._overlayDefaults.closeOnOutsideClick = false;
         this._overlayDefaults.closeOnEscape = true;
+        this._overlayDefaults.cacheSize = false;
 
         this.target.closing.pipe(takeUntil(this._destroy$)).subscribe((event) => {
             if (this.target.tooltipTarget !== this) {