fix(tooltip): do not create arrow in SSR mode - 20.1.x

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

@@ -1,8 +1,9 @@
 import {
     Directive, OnInit, OnDestroy, Output, ElementRef, Optional, ViewContainerRef, HostListener,
-    Input, EventEmitter, booleanAttribute, TemplateRef, ComponentRef, Renderer2, OnChanges, SimpleChanges,
+    Input, EventEmitter, booleanAttribute, TemplateRef, ComponentRef, Renderer2,
     EnvironmentInjector,
     createComponent,
+    AfterViewInit,
 } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -45,7 +46,7 @@ export interface ITooltipHideEventArgs extends IBaseEventArgs {
     selector: '[igxTooltipTarget]',
     standalone: true
 })
-export class IgxTooltipTargetDirective extends IgxToggleActionDirective implements OnChanges, OnInit, OnDestroy {
+export class IgxTooltipTargetDirective extends IgxToggleActionDirective implements OnInit, AfterViewInit, OnDestroy {
     /**
      * Gets/sets the amount of milliseconds that should pass before showing the tooltip.
      *
@@ -101,7 +102,7 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
      */
     @Input()
     public set hasArrow(value: boolean) {
-        if (this.target) {
+        if (this.target && this.target.arrow) {
             this.target.arrow.style.display = value ? '' : 'none';
         }
         this._hasArrow = value;
@@ -397,16 +398,6 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
         }
     }
 
-
-    /**
-     * @hidden
-     */
-    public ngOnChanges(changes: SimpleChanges): void {
-        if (changes['hasArrow']) {
-            this.target.arrow.style.display = changes['hasArrow'].currentValue ? '' : 'none';
-        }
-    }
-
     /**
      * @hidden
      */
@@ -433,6 +424,15 @@ export class IgxTooltipTargetDirective extends IgxToggleActionDirective implemen
         this.nativeElement.addEventListener('touchstart', this.onTouchStart = this.onTouchStart.bind(this), { passive: true });
     }
 
+    /**
+     * @hidden
+     */
+    public ngAfterViewInit(): void {
+        if (this.target && this.target.arrow) {
+            this.target.arrow.style.display = this.hasArrow ? '' : 'none';
+        }
+    }
+
     /**
      * @hidden
      */

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

@@ -1,12 +1,15 @@
 import {
     Directive, ElementRef, Input, ChangeDetectorRef, Optional, HostBinding, Inject,
     OnDestroy, inject, DOCUMENT, HostListener,
+    Renderer2,
+    AfterViewInit,
 } from '@angular/core';
 import { IgxOverlayService } from '../../services/overlay/overlay';
 import { IgxNavigationService } from '../../core/navigation';
 import { IgxToggleDirective } from '../toggle/toggle.directive';
 import { IgxTooltipTargetDirective } from './tooltip-target.directive';
 import { Subject, takeUntil } from 'rxjs';
+import { PlatformUtil } from '../../core/utils';
 
 let NEXT_ID = 0;
 /**
@@ -28,7 +31,7 @@ let NEXT_ID = 0;
     selector: '[igxTooltip]',
     standalone: true
 })
-export class IgxTooltipDirective extends IgxToggleDirective implements OnDestroy {
+export class IgxTooltipDirective extends IgxToggleDirective implements AfterViewInit, OnDestroy {
     /**
      * @hidden
      */
@@ -116,6 +119,8 @@ export class IgxTooltipDirective extends IgxToggleDirective implements OnDestroy
     private _role: 'tooltip' | 'status' = 'tooltip';
     private _destroy$ = new Subject<boolean>();
     private _document = inject(DOCUMENT);
+    private _renderer = inject(Renderer2);
+    private _platformUtil = inject(PlatformUtil);
 
     /** @hidden */
     constructor(
@@ -133,8 +138,13 @@ export class IgxTooltipDirective extends IgxToggleDirective implements OnDestroy
         this.closed.pipe(takeUntil(this._destroy$)).subscribe(() => {
             this._document.removeEventListener('touchstart', this.onDocumentTouchStart);
         });
+    }
 
-        this._createArrow();
+    /** @hidden */
+    public ngAfterViewInit(): void {
+        if (this._platformUtil.isBrowser) {
+            this._createArrow();
+        }
     }
 
     /** @hidden */
@@ -144,7 +154,10 @@ export class IgxTooltipDirective extends IgxToggleDirective implements OnDestroy
         this._document.removeEventListener('touchstart', this.onDocumentTouchStart);
         this._destroy$.next(true);
         this._destroy$.complete();
-        this._removeArrow();
+
+        if (this.arrow) {
+            this._removeArrow();
+        }
     }
 
     /**
@@ -192,10 +205,10 @@ export class IgxTooltipDirective extends IgxToggleDirective implements OnDestroy
     }
 
     private _createArrow(): void {
-        this._arrowEl = document.createElement('span');
-        this._arrowEl.style.position = 'absolute';
-        this._arrowEl.setAttribute('data-arrow', 'true');
-        this.element.appendChild(this._arrowEl);
+        this._arrowEl = this._renderer.createElement('span');
+        this._renderer.setStyle(this._arrowEl, 'position', 'absolute');
+        this._renderer.setAttribute(this._arrowEl, 'data-arrow', 'true');
+        this._renderer.appendChild(this.element, this._arrowEl);
     }
 
     private _removeArrow(): void {

projects/igniteui-angular/src/lib/grids/grid/grid-validation.spec.ts

@@ -167,8 +167,8 @@ describe('IgxGrid - Validation #grid', () => {
             cell = grid.gridAPI.get_cell_by_visible_index(1, 1);
             //min length should be 4
             GridFunctions.verifyCellValid(cell, false);
-            const erorrMessage = cell.errorTooltip.first.elementRef.nativeElement.children[1].textContent;
-            expect(erorrMessage).toEqual(' Entry should be at least 4 character(s) long ');
+            const errorMessage = cell.errorTooltip.first.elementRef.nativeElement.children[0].textContent;
+            expect(errorMessage).toEqual(' Entry should be at least 4 character(s) long ');
         });
 
         it('should mark invalid cell with igx-grid__td--invalid class and show the related error cell template when the field contains "."', () => {
@@ -186,8 +186,8 @@ describe('IgxGrid - Validation #grid', () => {
             cell = grid.gridAPI.get_cell_by_visible_index(1, 4);
             //min length should be 4
             GridFunctions.verifyCellValid(cell, false);
-            const erorrMessage = cell.errorTooltip.first.elementRef.nativeElement.children[1].textContent;
-            expect(erorrMessage).toEqual(' Entry should be at least 4 character(s) long ');
+            const errorMessage = cell.errorTooltip.first.elementRef.nativeElement.children[0].textContent;
+            expect(errorMessage).toEqual(' Entry should be at least 4 character(s) long ');
         });
 
         it('should show the error message on error icon hover and when the invalid cell becomes active.', fakeAsync(() => {
@@ -204,8 +204,8 @@ describe('IgxGrid - Validation #grid', () => {
             //min length should be 4
             GridFunctions.verifyCellValid(cell, false);
             GridSelectionFunctions.verifyCellActive(cell, true);
-            const erorrMessage = cell.errorTooltip.first.elementRef.nativeElement.children[1].textContent;
-            expect(erorrMessage).toEqual(' Entry should be at least 4 character(s) long ');
+            const errorMessage = cell.errorTooltip.first.elementRef.nativeElement.children[0].textContent;
+            expect(errorMessage).toEqual(' Entry should be at least 4 character(s) long ');
 
             const overlayService = TestBed.inject(IgxOverlayService);
             const info = overlayService.getOverlayById(cell.errorTooltip.first.overlayId);
@@ -390,8 +390,8 @@ describe('IgxGrid - Validation #grid', () => {
             cell = grid.gridAPI.get_cell_by_visible_index(1, 1);
             //bob cannot be the name
             GridFunctions.verifyCellValid(cell, false);
-            const erorrMessage = cell.errorTooltip.first.elementRef.nativeElement.children[1].textContent;
-            expect(erorrMessage).toEqual(' This name is forbidden. ');
+            const errorMessage = cell.errorTooltip.first.elementRef.nativeElement.children[0].textContent;
+            expect(errorMessage).toEqual(' This name is forbidden. ');
 
             cell.editMode = true;
             cell.update('test');
@@ -425,8 +425,8 @@ describe('IgxGrid - Validation #grid', () => {
             fixture.detectChanges();
 
             GridFunctions.verifyCellValid(cell, false);
-            const erorrMessage = cell.errorTooltip.first.elementRef.nativeElement.children[1].textContent;
-            expect(erorrMessage).toEqual(' Entry should be at least 4 character(s) long ');
+            const errorMessage = cell.errorTooltip.first.elementRef.nativeElement.children[0].textContent;
+            expect(errorMessage).toEqual(' Entry should be at least 4 character(s) long ');
         });
 
         it('should trigger validation on change when using custom editor bound via editValue.', () => {
@@ -444,8 +444,8 @@ describe('IgxGrid - Validation #grid', () => {
             fixture.detectChanges();
 
             GridFunctions.verifyCellValid(cell, false);
-            const erorrMessage = cell.errorTooltip.first.elementRef.nativeElement.children[1].textContent;
-            expect(erorrMessage).toEqual(' Entry should be at least 4 character(s) long ');
+            const errorMessage = cell.errorTooltip.first.elementRef.nativeElement.children[0].textContent;
+            expect(errorMessage).toEqual(' Entry should be at least 4 character(s) long ');
         });
 
         it('should trigger validation on blur when using custom editor bound via editValue.', () => {
@@ -472,8 +472,8 @@ describe('IgxGrid - Validation #grid', () => {
             grid.crudService.endEdit(true);
             fixture.detectChanges();
             GridFunctions.verifyCellValid(cell, false);
-            const erorrMessage = cell.errorTooltip.first.elementRef.nativeElement.children[1].textContent;
-            expect(erorrMessage).toEqual(' Entry should be at least 4 character(s) long ');
+            const errorMessage = cell.errorTooltip.first.elementRef.nativeElement.children[0].textContent;
+            expect(errorMessage).toEqual(' Entry should be at least 4 character(s) long ');
         });
     });