fix(tooltip/snackbar): use overlay service size helpers

Author: RivaIvanova

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

@@ -569,8 +569,7 @@ describe('igxOverlay', () => {
                 scrollStrategy: new NoOpScrollStrategy(),
                 modal: true,
                 closeOnOutsideClick: true,
-                closeOnEscape: false,
-                cacheSize: true
+                closeOnEscape: false
             };
 
             spyOn(overlayInstance.contentAppending, 'emit');
@@ -3507,7 +3506,7 @@ describe('igxOverlay', () => {
         }));
 
         // 4. Css
-        it('Should use component initial container\'s properties based on cacheSize when it\'s with 100% width and shown in overlay element',
+        it('Should use component initial container\'s properties when is with 100% width and show in overlay element',
             fakeAsync(() => {
                 const fixture = TestBed.createComponent(WidthTestOverlayComponent);
                 fixture.detectChanges();
@@ -3526,16 +3525,6 @@ 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();
             }));
     });
 

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

@@ -40,11 +40,12 @@ import {
 @Injectable({ providedIn: 'root' })
 export class IgxOverlayService implements OnDestroy {
     private _appRef = inject(ApplicationRef);
-    private document = inject(DOCUMENT);
     private _zone = inject(NgZone);
-    protected platformUtil = inject(PlatformUtil);
     private animationService = inject<AnimationService>(IgxAngularAnimationService);
 
+    protected document = inject(DOCUMENT);
+    protected platformUtil = inject(PlatformUtil);
+
     /**
      * Emitted just before the overlay content starts to open.
      * ```typescript
@@ -130,8 +131,7 @@ export class IgxOverlayService implements OnDestroy {
         scrollStrategy: new NoOpScrollStrategy(),
         modal: true,
         closeOnOutsideClick: true,
-        closeOnEscape: false,
-        cacheSize: true
+        closeOnEscape: false
     };
 
     constructor() {
@@ -332,18 +332,12 @@ export class IgxOverlayService implements OnDestroy {
         info.settings = eventArgs.settings;
         this._overlayInfos.push(info);
         info.hook = this.placeElementHook(info.elementRef.nativeElement);
-        let elementRect: DOMRect;
-        // 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 };
+        this.setInitialSize(
+            info,
+            () => this.moveElementToOverlay(info)
+        );
         // Update the container size after moving if there is size.
         if (info.size) {
             info.elementRef.nativeElement.parentElement.style.setProperty('--ig-size', info.size);
@@ -564,6 +558,24 @@ export class IgxOverlayService implements OnDestroy {
         return info;
     }
 
+    /**
+     * Measures the element's initial size and controls *when* the element is moved into the overlay outlet.
+     *
+     * The elements inherit constraining parent styles, so
+     * for some of them (e.g., Tooltip, Snackbar) their pre-move size is incorrect.
+     * Those can **override** this method to measure **after** moving to get an accurate size.
+     *
+     * - **Default**: Measures in-place (current parent), then moves to the overlay.
+     *
+     * @param info OverlayInfo for the content being attached.
+     * @param moveToOverlay Moves the element into the overlay.
+     */
+    protected setInitialSize(info: OverlayInfo, moveToOverlay: () => void): void {
+        const elementRect = info.elementRef.nativeElement.getBoundingClientRect();
+        info.initialSize = { width: elementRect.width, height: elementRect.height };
+        moveToOverlay();
+    }
+
     private _hide(id: string, event?: Event) {
         const info: OverlayInfo = this.getOverlayById(id);
         if (!info) {

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

@@ -134,12 +134,6 @@ export interface OverlaySettings {
      * Clicking on the elements in this collection will not close the overlay when closeOnOutsideClick = true.
      */
     excludeFromOutsideClick?: HTMLElement[];
-    /**
-     * @hidden @internal
-     * Controls whether element size is measured before (true) or after (false) moving to the overlay container.
-     * Default is true to retain element size.
-     */
-    cacheSize?: boolean;
 }
 
 export interface OverlayEventArgs extends IBaseEventArgs {

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

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

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

@@ -1,5 +1,5 @@
 import {
-    Directive, OnInit, OnDestroy, Output, ElementRef, ViewContainerRef,
+    Directive, OnInit, OnDestroy, Output, ViewContainerRef,
     Input, EventEmitter, booleanAttribute, TemplateRef, ComponentRef, Renderer2,
     EnvironmentInjector,
     createComponent,
@@ -425,7 +425,6 @@ 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) {

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

@@ -2,7 +2,7 @@ import { DebugElement } from '@angular/core';
 import { fakeAsync, TestBed, tick, flush, waitForAsync, ComponentFixture } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxTooltipSingleTargetComponent, IgxTooltipMultipleTargetsComponent, IgxTooltipPlainStringComponent, IgxTooltipWithToggleActionComponent, IgxTooltipWithCloseButtonComponent, IgxTooltipWithNestedContentComponent, IgxTooltipNestedTooltipsComponent } from '../../../../test-utils/tooltip-components.spec';
+import { IgxTooltipSingleTargetComponent, IgxTooltipMultipleTargetsComponent, IgxTooltipPlainStringComponent, IgxTooltipWithToggleActionComponent, IgxTooltipWithCloseButtonComponent, IgxTooltipWithNestedContentComponent, IgxTooltipNestedTooltipsComponent, IgxTooltipSizeComponent } from '../../../../test-utils/tooltip-components.spec';
 import { UIInteractions } from '../../../../test-utils/ui-interactions.spec';
 import { HorizontalAlignment, VerticalAlignment, AutoPositionStrategy } from '../../../../core/src/services/public_api';
 import { IgxTooltipDirective } from './tooltip.directive';
@@ -32,7 +32,8 @@ describe('IgxTooltip', () => {
                 IgxTooltipWithToggleActionComponent,
                 IgxTooltipWithCloseButtonComponent,
                 IgxTooltipWithNestedContentComponent,
-                IgxTooltipNestedTooltipsComponent
+                IgxTooltipNestedTooltipsComponent,
+                IgxTooltipSizeComponent
             ]
         }).compileComponents();
         UIInteractions.clearOverlay();
@@ -980,6 +981,31 @@ describe('IgxTooltip', () => {
 
             expect(fix.componentInstance.toggleDir.collapsed).toBe(false);
         }));
+
+        it('correctly sizes the tooltip/overlay content when inside an element - issue #16458', fakeAsync(() => {
+            const fixture = TestBed.createComponent(IgxTooltipSizeComponent);
+            fixture.detectChanges();
+
+            fixture.componentInstance.target1.showTooltip();
+            fixture.componentInstance.target2.showTooltip();
+            fixture.componentInstance.target3.showTooltip();
+            flush();
+
+            const tooltip1Rect = fixture.componentInstance.tooltip1.element.getBoundingClientRect();
+            const tooltip2Rect = fixture.componentInstance.tooltip2.element.getBoundingClientRect();
+            const tooltip3Rect = fixture.componentInstance.tooltip3.element.getBoundingClientRect();
+
+            const tooltip1ParentRect = fixture.componentInstance.tooltip1.element.parentElement.getBoundingClientRect();
+            const tooltip2ParentRect = fixture.componentInstance.tooltip2.element.parentElement.getBoundingClientRect();
+            const tooltip3ParentRect = fixture.componentInstance.tooltip3.element.parentElement.getBoundingClientRect();
+
+            expect(tooltip1Rect.width).toEqual(tooltip1ParentRect.width);
+            expect(tooltip1Rect.height).toEqual(tooltip1ParentRect.height);
+            expect(tooltip2Rect.width).toEqual(tooltip2ParentRect.width);
+            expect(tooltip2Rect.height).toEqual(tooltip2ParentRect.height);
+            expect(tooltip3Rect.width).toEqual(tooltip3ParentRect.width);
+            expect(tooltip3Rect.height).toEqual(tooltip3ParentRect.height);
+        }));
     });
 
     describe('Tooltip Sticky with Close Button', () => {

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

@@ -3,10 +3,25 @@ import {
     OnDestroy, inject, HostListener,
     Renderer2,
     AfterViewInit,
+    Injectable,
 } from '@angular/core';
-import { OverlaySettings, PlatformUtil } from 'igniteui-angular/core';
+import { IgxOverlayService, OverlaySettings, PlatformUtil } from 'igniteui-angular/core';
 import { IgxToggleDirective } from '../toggle/toggle.directive';
 import { IgxTooltipTargetDirective } from './tooltip-target.directive';
+import { OverlayInfo } from '../../../../core/src/services/overlay/utilities';
+
+/**
+ * Measures **after** moving the element into the overlay outlet so that parent
+ * style constraints do not affect the initial size.
+ */
+@Injectable()
+export class TooltipOverlayServiceHelper extends IgxOverlayService {
+    protected override setInitialSize(info: OverlayInfo, moveToOverlay: () => void): void {
+        moveToOverlay();
+        const elementRect = info.elementRef.nativeElement.getBoundingClientRect();
+        info.initialSize = { width: elementRect.width, height: elementRect.height };
+    }
+}
 
 let NEXT_ID = 0;
 /**
@@ -26,7 +41,13 @@ let NEXT_ID = 0;
 @Directive({
     exportAs: 'tooltip',
     selector: '[igxTooltip]',
-    standalone: true
+    standalone: true,
+    providers: [
+        {
+            provide: IgxOverlayService,
+            useClass: TooltipOverlayServiceHelper
+        }
+    ]
 })
 export class IgxTooltipDirective extends IgxToggleDirective implements AfterViewInit, OnDestroy {
     /**

projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.spec.ts

@@ -14,7 +14,8 @@ describe('IgxSnackbar', () => {
             imports: [
                 NoopAnimationsModule,
                 SnackbarInitializeTestComponent,
-                SnackbarCustomContentComponent
+                SnackbarCustomContentComponent,
+                SnackbarSizeTestComponent
             ]
         }).compileComponents();
     }));
@@ -183,6 +184,27 @@ describe('IgxSnackbar', () => {
         expect(customPositionSettings.openAnimation.options.params).toEqual({duration: '1000ms'});
         expect(customPositionSettings.minSize).toEqual({height: 100, width: 100});
     });
+
+    it('correctly sizes the snackbar/overlay content when inside an element - issue #16458', () => {
+        const fix = TestBed.createComponent(SnackbarSizeTestComponent);
+        fix.detectChanges();
+        snackbar = fix.componentInstance.snackbar;
+
+        const parentDivRect = snackbar.element.parentElement.getBoundingClientRect();
+        expect(parentDivRect.width).toBe(600);
+
+        snackbar.open();
+        fix.detectChanges();
+
+        const snackbarRect = snackbar.element.getBoundingClientRect();
+        const overlayContentRect = snackbar.element.parentElement.getBoundingClientRect();
+        const { marginLeft, marginRight, paddingLeft, paddingRight } = getComputedStyle(snackbar.element);
+        const horizontalMargins = parseFloat(marginLeft) + parseFloat(marginRight);
+        const horizontalPaddings = parseFloat(paddingLeft) + parseFloat(paddingRight);
+
+        expect(snackbarRect.width).toEqual(200 + horizontalPaddings);
+        expect(overlayContentRect.width).toEqual(snackbarRect.width + horizontalMargins);
+    });
 });
 
 describe('IgxSnackbar with custom content', () => {
@@ -273,3 +295,17 @@ class SnackbarCustomContentComponent {
     @ViewChild(IgxSnackbarComponent, { static: true }) public snackbar: IgxSnackbarComponent;
     public text: string;
 }
+
+@Component({
+    template: `
+    <div style="width: 600px;">
+        <igx-snackbar #snackbar>
+            <div style="width: 200px;">Snackbar Message</div>
+        </igx-snackbar>
+    </div>
+    `,
+    imports: [IgxSnackbarComponent]
+})
+class SnackbarSizeTestComponent {
+    @ViewChild(IgxSnackbarComponent, { static: true }) public snackbar: IgxSnackbarComponent;
+}

projects/igniteui-angular/snackbar/src/snackbar/snackbar.component.ts

@@ -3,15 +3,34 @@ import {
     Component,
     EventEmitter,
     HostBinding,
+    Injectable,
     Input,
     OnInit,
     Output
 } from '@angular/core';
 import { takeUntil } from 'rxjs/operators';
 import { ContainerPositionStrategy, GlobalPositionStrategy, HorizontalAlignment,
-    PositionSettings, VerticalAlignment } from 'igniteui-angular/core';
+    IgxOverlayService, PositionSettings, VerticalAlignment } from 'igniteui-angular/core';
 import { ToggleViewEventArgs, IgxButtonDirective, IgxNotificationsDirective } from 'igniteui-angular/directives';
 import { fadeIn, fadeOut } from 'igniteui-angular/animations';
+import { OverlayInfo } from '../../../core/src/services/overlay/utilities';
+
+/**
+ * Measures **after** moving the element into the overlay outlet so that parent
+ * style constraints do not affect the initial size.
+ */
+@Injectable()
+export class SnackbarOverlayServiceHelper extends IgxOverlayService {
+    protected override setInitialSize(info: OverlayInfo, moveToOverlay: () => void): void {
+        moveToOverlay();
+        const elementRect = info.elementRef.nativeElement.getBoundingClientRect();
+        // Needs full element width (margins included) to set proper width for the overlay container.
+        // Otherwise, the snackbar appears smaller and the text inside it might be misaligned.
+        const styles = this.document.defaultView.getComputedStyle(info.elementRef.nativeElement);
+        const horizontalMargins = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);
+        info.initialSize = { width: elementRect.width + horizontalMargins, height: elementRect.height };
+    }
+}
 
 let NEXT_ID = 0;
 /**
@@ -34,7 +53,13 @@ let NEXT_ID = 0;
 @Component({
     selector: 'igx-snackbar',
     templateUrl: 'snackbar.component.html',
-    imports: [IgxButtonDirective]
+    imports: [IgxButtonDirective],
+    providers: [
+        {
+            provide: IgxOverlayService,
+            useClass: SnackbarOverlayServiceHelper
+        }
+    ],
 })
 export class IgxSnackbarComponent extends IgxNotificationsDirective
     implements OnInit {

projects/igniteui-angular/test-utils/tooltip-components.spec.ts

@@ -1,5 +1,6 @@
 import { Component, TemplateRef, ViewChild } from '@angular/core';
-import { IgxToggleActionDirective, IgxToggleDirective, IgxTooltipDirective, IgxTooltipTargetDirective, ITooltipHideEventArgs, ITooltipShowEventArgs } from 'igniteui-angular/directives';
+import { IgxButtonDirective, IgxIconButtonDirective, IgxToggleActionDirective, IgxToggleDirective, IgxTooltipDirective, IgxTooltipTargetDirective, ITooltipHideEventArgs, ITooltipShowEventArgs } from 'igniteui-angular/directives';
+import { IgxIconComponent } from 'igniteui-angular/icon';
 
 
 @Component({
@@ -207,3 +208,32 @@ export class IgxTooltipNestedTooltipsComponent {
     @ViewChild('tooltipLevel2', { read: IgxTooltipDirective, static: true }) public tooltipLevel2: IgxTooltipDirective;
     @ViewChild('tooltipLevel3', { read: IgxTooltipDirective, static: true }) public tooltipLevel3: IgxTooltipDirective;
 }
+
+@Component({
+    template: `
+    <div #target1 style="background: red; width: 20px; height: 20px;" [igxTooltipTarget]="tooltip1">
+        <div #tooltip1="tooltip" igxTooltip>{{ message }}</div>
+    </div>
+    <button #target2 igxIconButton="flat" [igxTooltipTarget]="tooltip2">
+        <igx-icon>palette</igx-icon>
+        <div #tooltip2="tooltip" igxTooltip>{{ message }}</div>
+    </button>
+    <button #target3 igxButton="flat" [igxTooltipTarget]="tooltip3">
+        Button
+        <div #tooltip3="tooltip" igxTooltip>{{ message }}</div>
+    </button>
+    `,
+    imports: [IgxTooltipDirective, IgxTooltipTargetDirective, IgxIconComponent, IgxIconButtonDirective, IgxButtonDirective],
+    standalone: true
+})
+export class IgxTooltipSizeComponent {
+    @ViewChild('target1', { read: IgxTooltipTargetDirective, static: true }) public target1: IgxTooltipTargetDirective;
+    @ViewChild('target2', { read: IgxTooltipTargetDirective, static: true }) public target2: IgxTooltipTargetDirective;
+    @ViewChild('target3', { read: IgxTooltipTargetDirective, static: true }) public target3: IgxTooltipTargetDirective;
+
+    @ViewChild('tooltip1', { read: IgxTooltipDirective, static: true }) public tooltip1: IgxTooltipDirective;
+    @ViewChild('tooltip2', { read: IgxTooltipDirective, static: true }) public tooltip2: IgxTooltipDirective;
+    @ViewChild('tooltip3', { read: IgxTooltipDirective, static: true }) public tooltip3: IgxTooltipDirective;
+
+    public message: string = 'Long tooltip message for testing purposes';
+}