fix(grid): nav service cdr & event emit while row edit (#14735)

* test(grid): add test for row edit nav service handling/events

* fix(grid): nav service cdr & event emit while row edit

* fix(grid): nav service cdr & event emit while row edit

---------

Co-authored-by: Radoslav Karaivanov <[email protected]>
Co-authored-by: Desislava Dincheva <[email protected]>

Author: 3 people

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

@@ -68,8 +68,8 @@ export class IgxGridNavigationService {
 
     public dispatchEvent(event: KeyboardEvent) {
         const key = event.key.toLowerCase();
-        if (!this.activeNode || !(SUPPORTED_KEYS.has(key) || (key === 'tab' && this.grid.crudService.cell)) &&
-            !this.grid.crudService.rowEditingBlocked && !this.grid.crudService.rowInEditMode) {
+        const cellOrRowInEdit = this.grid.crudService.cell || this.grid.crudService.row;
+        if (!this.activeNode || !(SUPPORTED_KEYS.has(key) || (key === 'tab' && cellOrRowInEdit))) {
             return;
         }
         const shift = event.shiftKey;

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

@@ -971,6 +971,33 @@ describe('IgxGrid - Row Editing #grid', () => {
             expect(targetCell.active).toBeTruthy();
         }));
 
+        it(`Should not detectChanges & emit Grid.keyDown (navigation service) while editing`, () => {
+            targetCell = grid.gridAPI.get_cell_by_index(0, 'Downloads');
+
+            fix.detectChanges();
+
+            const keyDonwSpy = spyOn(grid.gridKeydown, 'emit');
+            const detectChangesSpy = spyOn(grid.cdr, 'detectChanges').and.callThrough();
+
+            UIInteractions.simulateDoubleClickAndSelectEvent(targetCell);
+            fix.detectChanges();
+
+            const cellElem = fix.debugElement.query(By.css(CELL_CLASS));
+            const input = cellElem.query(By.css('input'));
+
+            // change first editable cell value
+            UIInteractions.triggerKeyDownEvtUponElem('1', input.nativeElement, true);
+            UIInteractions.setInputElementValue(input, '1');
+
+            UIInteractions.triggerKeyDownEvtUponElem('2', input.nativeElement, true);
+            UIInteractions.setInputElementValue(input, '12');
+            fix.detectChanges();
+
+            expect(targetCell.editValue).toBe(12);
+
+            expect(keyDonwSpy).not.toHaveBeenCalled();
+            expect(detectChangesSpy).toHaveBeenCalledTimes(0);
+        });
     });
 
     describe('Exit row editing', () => {

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid-navigation.service.ts

@@ -11,8 +11,8 @@ export class IgxHierarchicalGridNavigationService extends IgxGridNavigationServi
 
     public override dispatchEvent(event: KeyboardEvent) {
         const key = event.key.toLowerCase();
-        if (!this.activeNode || !(SUPPORTED_KEYS.has(key) || (key === 'tab' && this.grid.crudService.cell)) &&
-            !this.grid.crudService.rowEditingBlocked && !this.grid.crudService.rowInEditMode) {
+        const cellOrRowInEdit = this.grid.crudService.cell || this.grid.crudService.row;
+        if (!this.activeNode || !(SUPPORTED_KEYS.has(key) || (key === 'tab' && cellOrRowInEdit))) {
             return;
         }