Refactor highlight directive applying - 7.1.x

projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts

@@ -196,9 +196,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
         IgxTextHighlightDirective.onActiveElementChanged.emit(groupName);
     }
 
-    constructor(element: ElementRef, public renderer: Renderer2) {
-        this.parentElement = this.renderer.parentNode(element.nativeElement);
-
+    constructor(private element: ElementRef, public renderer: Renderer2) {
         IgxTextHighlightDirective.onActiveElementChanged.pipe(takeUntil(this.destroy$)).subscribe((groupName) => {
             if (this.groupName === groupName) {
                 if (this._activeElementIndex !== -1) {
@@ -213,6 +211,8 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
      * @hidden
      */
     ngOnDestroy() {
+        this.clearHighlight();
+
         if (this._observer !== null) {
             this._observer.disconnect();
         }
@@ -241,6 +241,8 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
      * @hidden
      */
     ngAfterViewInit() {
+        this.parentElement = this.renderer.parentNode(this.element.nativeElement);
+
         if (IgxTextHighlightDirective.highlightGroupsMap.has(this.groupName) === false) {
             IgxTextHighlightDirective.highlightGroupsMap.set(this.groupName, {
                 rowIndex: -1,

projects/igniteui-angular/src/lib/grids/cell.component.html

@@ -1,11 +1,8 @@
-<ng-template #defaultCell igxTextHighlight [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
-        [value]="formatter ? formatter(value) : value" [row]="rowIndex" [column]="this.column.visibleIndex" [page]="this.grid.page" [containerClass]="'igx-grid__td-text'">
-    <ng-container *ngIf="column.dataType === 'boolean' || column.dataType === 'string' || formatter; else default" >
-        <div class="igx-grid__td-text">{{ formatter ? formatter(value) : value }}</div>
-    </ng-container>
-    <ng-template #default>
-        <div class="igx-grid__td-text">{{ column.dataType === 'number' ? (value | igxdecimal: grid.locale) : (value | igxdate: grid.locale) }}</div>
-    </ng-template>
+<ng-template #defaultCell>
+    <div igxTextHighlight [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
+         [value]="formatter ? formatter(value) : value" [row]="rowIndex" [column]="this.column.visibleIndex" 
+         [page]="this.grid.page" [containerClass]="'igx-grid__td-text'" 
+         class="igx-grid__td-text">{{ formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value }}</div>
 </ng-template>
 <ng-template #inlineEditor  let-cell="cell">
     <ng-container *ngIf="column.dataType === 'string'">

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -38,7 +38,7 @@ import { DataType } from '../data-operations/data-util';
     selector: 'igx-grid-cell',
     templateUrl: './cell.component.html'
 })
-export class IgxGridCellComponent implements OnInit, AfterViewInit {
+export class IgxGridCellComponent implements OnInit {
 
     /**
      * Gets the column of the cell.
@@ -267,15 +267,8 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
      */
     get inEditMode(): boolean {
         const editableCell = this.gridAPI.get_cell_inEditMode(this.gridID);
-        const result = editableCell ? this.cellID.rowID === editableCell.cellID.rowID &&
-                                      this.cellID.columnID === editableCell.cellID.columnID : false;
-
-        if (result && !this._inEditMode && this.highlight && this.grid.lastSearchInfo.searchText) {
-            this.highlight.observe();
-        }
-        this._inEditMode = result;
-
-        return result;
+        return editableCell ? this.cellID.rowID === editableCell.cellID.rowID &&
+                              this.cellID.columnID === editableCell.cellID.columnID : false;
     }
 
     /**
@@ -463,8 +456,23 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
     @ViewChild('inlineEditor', { read: TemplateRef })
     protected inlineEditorTemplate: TemplateRef<any>;
 
+    private _highlight: IgxTextHighlightDirective;
+
     @ViewChild(IgxTextHighlightDirective, { read: IgxTextHighlightDirective })
-    private highlight: IgxTextHighlightDirective;
+    private set highlight(value: IgxTextHighlightDirective) {
+        this._highlight = value;
+
+        if (this._highlight && this.grid.lastSearchInfo.searchText) {
+            this._highlight.highlight(this.grid.lastSearchInfo.searchText,
+                this.grid.lastSearchInfo.caseSensitive,
+                this.grid.lastSearchInfo.exactMatch);
+            this._highlight.activateIfNecessary();
+        }
+    }
+
+    private get highlight() {
+        return this._highlight;
+    }
 
     /**
      * Sets the current edit value while a cell is in edit mode.
@@ -500,7 +508,6 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
     private cellSelectionID: string;
     private prevCellSelectionID: string;
     private previousCellEditMode = false;
-    private _inEditMode: boolean;
 
     constructor(
         public gridAPI: GridBaseAPIService<IgxGridBaseComponent>,
@@ -625,19 +632,6 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
         this.grid.refreshSearch();
     }
 
-
-    /**
-     *@hidden
-     */
-    public ngAfterViewInit() {
-        if (this.highlight && this.grid.lastSearchInfo.searchText) {
-            this.highlight.highlight(this.grid.lastSearchInfo.searchText,
-                this.grid.lastSearchInfo.caseSensitive,
-                this.grid.lastSearchInfo.exactMatch);
-            this.highlight.activateIfNecessary();
-        }
-    }
-
     /**
      *@hidden
      */

projects/igniteui-angular/src/lib/grids/grid-base.component.ts

@@ -4179,7 +4179,12 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
 
         const editModeCell = this.gridAPI.get_cell_inEditMode(this.id);
         if (editModeCell) {
-            this.endEdit(false);
+            const editCell = this.gridAPI.get_cell_by_index(this.id, editModeCell.cellID.rowIndex, editModeCell.cellID.columnID);
+            if (editCell) {
+                editCell.inEditMode = false;
+            } else {
+                this.endEdit(false);
+            }
         }
 
         if (this.collapsedHighlightedItem) {

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

@@ -713,9 +713,12 @@ describe('IgxGrid - search API', () => {
             expect(highlights.length).toBe(1);
             expect(activeHighlight).toBe(highlights[0]);
 
-            cell.inEditMode = false;
-            await wait(30);
+            const nextCell = grid.getCellByColumn(0, 'JobTitle').nativeElement;
+            nextCell.dispatchEvent(new Event('click'));
+            await wait();
             fix.detectChanges();
+
+            expect(cell.nativeElement.innerText.trim()).toBe('Casey Houston');
         });
     });
 
@@ -1178,13 +1181,38 @@ describe('IgxGrid - search API', () => {
     });
 
     /* Grid with Avatar */
-    it('Cells with no text should be excluded from the search', () => {
-        fix = TestBed.createComponent(GridWithAvatarComponent);
-        grid = fix.componentInstance.grid;
-        fix.detectChanges();
+    describe('', () => {
+        beforeEach(() => {
+            fix = TestBed.createComponent(GridWithAvatarComponent);
+            grid = fix.componentInstance.grid;
+            fix.detectChanges();
+        });
+
+        it('Cells with no text should be excluded from the search', () => {
+            const matches = grid.findNext('https');
+            expect(matches).toBe(0);
+        });
 
-        const matches = grid.findNext('https');
-        expect(matches).toBe(0);
+        it('Cells with custom template should be excluded from search when pin/unpin', () => {
+            grid.columns[1].pinned = true;
+            fix.detectChanges();
+
+            const matches = grid.findNext('https');
+            expect(matches).toBe(0);
+
+            let cell = grid.getCellByColumn(0, 'Avatar').nativeElement;
+            expect(cell.children.length).toBe(1);
+            let image = cell.querySelector('.cell__inner, .avatar-cell');
+            expect(image.hidden).toBeFalsy();
+
+            grid.columns[1].pinned = false;
+            fix.detectChanges();
+
+            cell = grid.getCellByColumn(0, 'Avatar').nativeElement;
+            expect(cell.children.length).toBe(1);
+            image = cell.querySelector('.cell__inner, .avatar-cell');
+            expect(image.hidden).toBeFalsy();
+        });
     });
 
     function findNext(currentGrid: IgxGridComponent, text: string) {

projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html

@@ -1,11 +1,8 @@
-<ng-template #defaultCell igxTextHighlight [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
-        [value]="formatter ? formatter(value) : value" [row]="rowIndex" [column]="this.column.visibleIndex" [page]="this.grid.page" [containerClass]="'igx-grid__td-text'">
-    <ng-container *ngIf="column.dataType === 'boolean' || column.dataType === 'string' || formatter; else default" >
-        <div class="igx-grid__td-text">{{ formatter ? formatter(value) : value }}</div>
-    </ng-container>
-    <ng-template #default>
-        <div class="igx-grid__td-text">{{ column.dataType === 'number' ? (value | igxdecimal: grid.locale) : (value | igxdate: grid.locale) }}</div>
-    </ng-template>
+<ng-template #defaultCell>
+    <div igxTextHighlight [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
+         [value]="formatter ? formatter(value) : value" [row]="rowIndex" [column]="this.column.visibleIndex" 
+         [page]="this.grid.page" [containerClass]="'igx-grid__td-text'" 
+         class="igx-grid__td-text">{{ formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value }}</div>
 </ng-template>
 <ng-template #inlineEditor  let-cell="cell">
     <ng-container *ngIf="column.dataType === 'string'">