fix(grid): keep edit mode when tabbing #7308

Author: hanastasov

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

@@ -28,7 +28,7 @@ import {
     Directive
 } from '@angular/core';
 import ResizeObserver from 'resize-observer-polyfill';
-import { Subject, combineLatest, pipe } from 'rxjs';
+import { Subject, pipe } from 'rxjs';
 import { takeUntil, first, filter, throttleTime, map } from 'rxjs/operators';
 import { cloneArray, isEdge, isNavigationKey, flatten, mergeObjects, isIE } from '../core/utils';
 import { DataType } from '../data-operations/data-util';
@@ -2822,6 +2822,15 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         this.setupColumns();
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public setFilteredSortedData(data) {
+        this._filteredSortedData = data;
+        this.refreshSearch(true, false);
+    }
+
     /**
      * @hidden @internal
      */
@@ -4025,7 +4034,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
      * ```
      * @param updateActiveInfo
     */
-    public refreshSearch(updateActiveInfo?: boolean): number {
+    public refreshSearch(updateActiveInfo?: boolean, endEdit = true): number {
         if (this.lastSearchInfo.searchText) {
             this.rebuildMatchCache();
 
@@ -4040,7 +4049,12 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
                 });
             }
 
-            return this.find(this.lastSearchInfo.searchText, 0, this.lastSearchInfo.caseSensitive, this.lastSearchInfo.exactMatch, false);
+            return this.find(this.lastSearchInfo.searchText,
+                0,
+                this.lastSearchInfo.caseSensitive,
+                this.lastSearchInfo.exactMatch,
+                false,
+                endEdit);
         } else {
             return 0;
         }
@@ -5357,12 +5371,14 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         return col.field + col._calcWidth;
     }
 
-    private find(text: string, increment: number, caseSensitive?: boolean, exactMatch?: boolean, scroll?: boolean) {
+    private find(text: string, increment: number, caseSensitive?: boolean, exactMatch?: boolean, scroll?: boolean, endEdit = true) {
         if (!this.rowList) {
             return 0;
         }
 
-        this.endEdit(false);
+        if (endEdit) {
+            this.endEdit(false);
+        }
 
         if (!text) {
             this.clearSearch();
@@ -5438,10 +5454,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     get filteredSortedData(): any[] {
         return this._filteredSortedData;
     }
-    set filteredSortedData(value: any[]) {
-        this._filteredSortedData = value;
-        this.refreshSearch(true);
-    }
 
     /**
      * @hidden

projects/igniteui-angular/src/lib/grids/grid/grid.pipes.ts

@@ -38,7 +38,7 @@ export class IgxGridSortingPipe implements PipeTransform {
         } else {
             result = DataUtil.sort(cloneArray(collection), expressions, sorting);
         }
-        grid.filteredSortedData = result;
+        grid.setFilteredSortedData(result);
 
         return result;
     }

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

@@ -9,7 +9,7 @@ import { IForOfState } from '../../directives/for-of/for_of.directive';
 import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
 import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy';
 import { configureTestSuite } from '../../test-utils/configure-suite';
-import { wait } from '../../test-utils/ui-interactions.spec';
+import { wait, UIInteractions } from '../../test-utils/ui-interactions.spec';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { DataType } from '../../data-operations/data-util';
 import { setupGridScrollDetection } from '../../test-utils/helper-utils.spec';
@@ -686,6 +686,44 @@ describe('IgxGrid - search API #grid - ', () => {
             expect(highlights.length).toBe(1);
             expect(row.inEditMode).toBe(false);
         });
+
+        it('Should keep edit mode when tabbing, after search is applied', () => {
+            grid.primaryKey = 'ID';
+            grid.getColumnByName('Name').editable = true;
+            grid.getColumnByName('JobTitle').editable = true;
+            fix.detectChanges();
+            const cell = grid.getCellByColumn(1, 'Name');
+            const caseyCell = grid.getCellByColumn(0, 'Name');
+            const newVal = 'newCellValue';
+
+            grid.findNext('Casey');
+            fix.detectChanges();
+            let highlights = caseyCell.nativeElement.querySelectorAll(HIGHLIGHT_CSS_CLASS);
+            expect(highlights.length).toBe(1);
+
+            cell.nativeElement.dispatchEvent(new MouseEvent('dblclick'));
+            fix.detectChanges();
+
+            expect(cell.editMode).toBeTruthy();
+            highlights = caseyCell.nativeElement.querySelectorAll(HIGHLIGHT_CSS_CLASS);
+            expect(highlights.length).toBe(1);
+
+            let cellInput = null;
+            cellInput = cell.nativeElement.querySelector('[igxinput]');
+            UIInteractions.setInputElementValue(cellInput, newVal);
+
+            // press tab on edited cell
+            UIInteractions.triggerKeyDownEvtUponElem('tab', cell.nativeElement, true);
+            fix.detectChanges();
+
+            expect(cell.value).toBe(newVal);
+            expect(cell.editMode).toBeFalsy();
+            highlights = caseyCell.nativeElement.querySelectorAll(HIGHLIGHT_CSS_CLASS);
+
+            const nextCell = grid.getCellByColumn(1, 'JobTitle');
+            expect(nextCell.editMode).toBeTruthy();
+            expect(highlights.length).toBe(1);
+        });
     });
 
     describe('ScrollableGrid - ', () => {

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

@@ -213,7 +213,7 @@ export class IgxTreeGridSortingPipe implements PipeTransform {
         }
         const filteredSortedData = [];
         this.flattenTreeGridRecords(result, filteredSortedData);
-        grid.filteredSortedData = filteredSortedData;
+        grid.setFilteredSortedData(filteredSortedData);
 
         return result;
     }