Refactor highlight directive applying

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

@@ -179,11 +179,6 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
     @DeprecateProperty(`IgxTextHighlightDirective 'page' input property is deprecated.`)
     public page: number;
 
-    /**
-     * The content child element that should be hidden when there is a highlight
-     */
-    public contentChildElement: ElementRef;
-
     /**
      * @hidden
      */
@@ -212,9 +207,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) {
@@ -229,6 +222,8 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
      * @hidden
      */
     ngOnDestroy() {
+        this.clearHighlight();
+
         if (this._observer !== null) {
             this._observer.disconnect();
         }
@@ -257,6 +252,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, {
                 index: -1
@@ -414,11 +411,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
     }
 
     private clearChildElements(originalContentHidden: boolean): void {
-        const childToHide = this.contentChildElement ? this.contentChildElement.nativeElement :
-                            this.parentElement.firstElementChild ? this.parentElement.firstElementChild : null;
-        if (childToHide) {
-            this.renderer.setProperty(childToHide, 'hidden', originalContentHidden);
-        }
+        this.renderer.setProperty(this.element.nativeElement, 'hidden', originalContentHidden);
 
         if (this._div !== null) {
             this.renderer.removeChild(this.parentElement, this._div);

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

@@ -1,11 +1,7 @@
-<ng-template #defaultCell igxTextHighlight [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
-        [value]="formatter ? formatter(value) : value" [row]="row.rowData" [column]="this.column.field" [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]="row.rowData" [column]="this.column.field" [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 })
-    protected highlight: IgxTextHighlightDirective;
+    protected 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();
+        }
+    }
+
+    protected 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>,
@@ -624,19 +631,6 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
         this.cdr.markForCheck();
     }
 
-
-    /**
-     *@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

@@ -4261,7 +4261,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 (!text) {

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');
         });
     });
 
@@ -1179,13 +1182,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,7 @@
-<ng-template #defaultCell igxTextHighlight [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
-        [value]="formatter ? formatter(value) : value" [row]="row.rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'">
-    <ng-container *ngIf="column.dataType === 'boolean' || column.dataType === 'string' || formatter; else default" >
-        <div #defaultContentElement class="igx-grid__td-text">{{ formatter ? formatter(value) : value }}</div>
-    </ng-container>
-    <ng-template #default>
-        <div #defaultContentElement 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]="row.rowData" [column]="this.column.field" [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/tree-grid/tree-cell.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ChangeDetectorRef, ElementRef, ViewChild, Inject, ViewChildren, QueryList } from '@angular/core';
+import { Component, ChangeDetectorRef, ElementRef, ViewChild, Inject } from '@angular/core';
 import { IgxGridCellComponent } from '../cell.component';
 import { IgxTreeGridAPIService } from './tree-grid-api.service';
 import { GridBaseAPIService } from '../api.service';
@@ -11,7 +11,7 @@ import { IgxGridBaseComponent } from '../grid';
     selector: 'igx-tree-grid-cell',
     templateUrl: 'tree-cell.component.html'
 })
-export class IgxTreeGridCellComponent extends IgxGridCellComponent implements AfterViewInit {
+export class IgxTreeGridCellComponent extends IgxGridCellComponent {
     private treeGridAPI: IgxTreeGridAPIService;
 
     constructor(gridAPI: GridBaseAPIService<IgxGridBaseComponent>,
@@ -32,36 +32,6 @@ export class IgxTreeGridCellComponent extends IgxGridCellComponent implements Af
     @ViewChild('defaultContentElement', { read: ElementRef })
     public defaultContentElement: ElementRef;
 
-    /**
-     *@hidden
-     */
-    public ngAfterViewInit() {
-        if (this.highlight) {
-            this.highlight.contentChildElement = this.defaultContentElement;
-
-            if (this.grid.lastSearchInfo.searchText) {
-                this.highlight.highlight(this.grid.lastSearchInfo.searchText,
-                    this.grid.lastSearchInfo.caseSensitive,
-                    this.grid.lastSearchInfo.exactMatch);
-                this.highlight.activateIfNecessary();
-            }
-        }
-    }
-
-    /**
-     * If the provided string matches the text in the cell, the text gets highlighted.
-     * ```typescript
-     * this.cell.highlightText('Cell Value', true);
-     * ```
-     * @memberof IgxGridCellComponent
-     */
-    public highlightText(text: string, caseSensitive?: boolean, exactMatch?: boolean): number {
-        if (this.highlight) {
-            this.highlight.contentChildElement = this.defaultContentElement;
-        }
-        return super.highlightText(text, caseSensitive, exactMatch);
-    }
-
     /**
      * @hidden
      */

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-api.service.ts

@@ -105,7 +105,7 @@ export class IgxTreeGridAPIService extends GridBaseAPIService<IgxTreeGridCompone
         });
     }
 
-    public expand_path_to_recrod(id: string, record: ITreeGridRecord) {
+    public expand_path_to_record(id: string, record: ITreeGridRecord) {
         const grid = this.get(id);
         const expandedStates = grid.expansionStates;
 

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

@@ -479,7 +479,7 @@ export class IgxTreeGridComponent extends IgxGridBaseComponent {
         const rowData = typeof row === 'number' ? this.filteredSortedData[row] : row;
         const rowID = this._gridAPI.get_row_id(this.id, rowData);
         const record = this.processedRecords.get(rowID);
-        this._gridAPI.expand_path_to_recrod(this.id, record);
+        this._gridAPI.expand_path_to_record(this.id, record);
         const rowIndex = this.processedExpandedFlatData.indexOf(rowData);
 
         super.scrollTo(rowIndex, column);