fix(search): move highlight in afterViewChecked #3631

IgniteUI · Jan 17, 2019 · 2d96d44 · 2d96d44
1 parent 0019348
commit 2d96d44
Showing 1 changed file with 15 additions and 7 deletions.
diff --git a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts
@@ -9,7 +9,8 @@ import {
     OnDestroy,
     Output,
     Renderer2,
-    SimpleChanges
+    SimpleChanges,
+    AfterViewChecked
 } from '@angular/core';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
@@ -32,7 +33,7 @@ export interface IActiveHighlightInfo {
 @Directive({
     selector: '[igxTextHighlight]'
 })
-export class IgxTextHighlightDirective implements AfterViewInit, OnDestroy, OnChanges {
+export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecked, OnDestroy, OnChanges {
     private static onActiveElementChanged = new EventEmitter<string>();
     public static highlightGroupsMap = new Map<string, IActiveHighlightInfo>();
 
@@ -42,6 +43,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, OnDestroy, OnCh
     private _nodeWasRemoved = false;
     private _forceEvaluation = false;
     private _activeElementIndex = -1;
+    private _oldValue: any;
 
     /**
      * Determines the `CSS` class of the highlight elements.
@@ -221,11 +223,6 @@ export class IgxTextHighlightDirective implements AfterViewInit, OnDestroy, OnCh
      * @hidden
      */
     ngOnChanges(changes: SimpleChanges) {
-        if (changes.value && !changes.value.firstChange) {
-            this.highlight(this._lastSearchInfo.searchedText, this._lastSearchInfo.caseSensitive, this._lastSearchInfo.exactMatch);
-            this.activateIfNecessary();
-        }
-
         if ((changes.row !== undefined && !changes.row.firstChange) ||
             (changes.column !== undefined && !changes.column.firstChange) ||
             (changes.page !== undefined && !changes.page.firstChange)) {
@@ -261,6 +258,17 @@ export class IgxTextHighlightDirective implements AfterViewInit, OnDestroy, OnCh
         this._container = this.parentElement.firstElementChild;
     }
 
+    /**
+     * @hidden
+     */
+    ngAfterViewChecked() {
+        if (this.value !== this._oldValue) {
+            this.highlight(this._lastSearchInfo.searchedText, this._lastSearchInfo.caseSensitive, this._lastSearchInfo.exactMatch);
+            this.activateIfNecessary();
+            this._oldValue = this.value;
+        }
+    }
+
     /**
      * Clears the existing highlight and highlights the searched text.
      * Returns how many times the element contains the searched text.