fix(tooltip): mark tooltip as dirty when changing its role (#17382)

* test(tooltip): add zoneless sticky tooltip test

* fix(tooltip): mark tooltip as dirty when changing its role

* chore: mark toggle cdr reference as protected

* test(tooltip): add test for close button removal when sticky is false

---------

Co-authored-by: Viktor Kombov <75325639+viktorkombov@users.noreply.github.com>
Co-authored-by: Stamen Stoychev <chronos.stz@gmail.com>

Author: 3 people

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

@@ -42,7 +42,7 @@ export interface ToggleViewCancelableEventArgs extends ToggleViewEventArgs, Canc
 })
 export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
     private elementRef = inject(ElementRef);
-    private cdr = inject(ChangeDetectorRef);
+    protected cdr = inject(ChangeDetectorRef);
     protected overlayService = inject<IgxOverlayService>(IgxOverlayService);
     private navigationService = inject(IgxNavigationService, { optional: true });
     private platform = inject(PlatformUtil, { optional: true });

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

@@ -689,6 +689,9 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
             this._renderer.appendChild(this.target.element, this._closeButtonRef.location.nativeElement);
             this._closeButtonRef.changeDetectorRef.detectChanges();
             this.target.role = "status"
+            // Mark the tooltip directive as Dirty to ensure that
+            // the CD refreshes the bindings
+            this.target.cdr?.markForCheck();
         }
     }
 
@@ -700,6 +703,9 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
             this._renderer.removeChild(this.target.element, this._closeButtonRef.location.nativeElement);
             this._closeButtonRef.changeDetectorRef.detectChanges();
             this.target.role = "tooltip"
+            // Mark the tooltip directive as Dirty to ensure that
+            // the CD refreshes the bindings
+            this.target.cdr?.markForCheck();
         }
     }
 

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

@@ -1,9 +1,9 @@
-import { DebugElement } from '@angular/core';
+import { DebugElement, ErrorHandler, provideZonelessChangeDetection } 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 { UIInteractions } from '../../../../test-utils/ui-interactions.spec';
+import { UIInteractions, wait } from '../../../../test-utils/ui-interactions.spec';
 import { HorizontalAlignment, VerticalAlignment, AutoPositionStrategy } from '../../../../core/src/services/public_api';
 import { IgxTooltipDirective } from './tooltip.directive';
 import { IgxTooltipTargetDirective } from './tooltip-target.directive';
@@ -1101,6 +1101,61 @@ describe('IgxTooltip', () => {
             expect(closeBtn).toBeTruthy();
             expect(tooltipNativeElement.getAttribute('role')).toBe('status');
         }));
+
+        describe('Zoneless', () => {
+            beforeEach(async () => {
+                TestBed.resetTestingModule();
+                await TestBed.configureTestingModule({
+                    imports: [
+                        NoopAnimationsModule,
+                        IgxTooltipWithCloseButtonComponent
+                    ],
+                    providers: [provideZonelessChangeDetection()]
+                }).compileComponents();
+            });
+
+            beforeEach(() => {
+                fix = TestBed.createComponent(IgxTooltipWithCloseButtonComponent);
+                fix.detectChanges();
+                tooltipNativeElement = fix.debugElement.query(By.directive(IgxTooltipDirective)).nativeElement;
+                tooltipTarget = fix.componentInstance.tooltipTarget as IgxTooltipTargetDirective;
+                button = fix.debugElement.query(By.directive(IgxTooltipTargetDirective));
+            });
+
+            it('should not throw ExpressionChangedAfterItHasBeenChecked when showing sticky tooltip with close button', async () => {
+                const errorHandler = TestBed.inject(ErrorHandler);
+                const handleErrorSpy = spyOn(errorHandler, 'handleError');
+
+                hoverElement(button);
+                await wait(SHOW_DELAY + 50);
+                fix.detectChanges();
+
+                expect(handleErrorSpy).not.toHaveBeenCalled();
+                verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
+                expect(tooltipNativeElement.getAttribute('role')).toBe('status');
+            });
+
+            it('should correctly remove the close button and update the role when sticky is set to false', async () => {
+                tooltipTarget.sticky = true;
+                fix.detectChanges();
+                hoverElement(button);
+                await wait(SHOW_DELAY + 50);
+                fix.detectChanges();
+
+                const closeBtn = tooltipNativeElement.querySelector('igx-tooltip-close-button');
+                expect(closeBtn).not.toBeNull();
+                expect(fix.componentInstance.tooltip.role).toBe('status');
+
+                tooltipTarget.sticky = false;
+                fix.detectChanges();
+                hoverElement(button);
+                await wait(SHOW_DELAY + 50);
+                fix.detectChanges();
+
+                expect(fix.componentInstance.tooltip.role).toBe('tooltip');
+                expect(tooltipNativeElement.querySelector('igx-tooltip-close-button')).toBeNull();
+            });
+        });
     });
 
     describe('IgxTooltip placement and offset', () => {
@@ -1188,7 +1243,7 @@ const alignmentTolerance = 2;
 export const verifyTooltipPosition = (
     tooltipNativeElement: HTMLElement,
     actualTarget: { nativeElement: HTMLElement },
-    shouldAlign:boolean = true,
+    shouldAlign: boolean = true,
     placement: Placement = Placement.Bottom,
     offset: number = 6
 ) => {