Merge pull request #6363 from IgniteUI/ddincheva/rowEdit-8.2

Should not throw error when row edit template is empty -- 8.2.x

Author: Lipata

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

@@ -167,23 +167,34 @@ export class IgxGridNavigationService {
     }
 
     public movePreviousEditable(rowIndex: number, currentColumnVisibleIndex: number) {
-        const prevEditableColumnIndex = this.findNextEditable(MoveDirection.LEFT, currentColumnVisibleIndex - 1);
-        if (prevEditableColumnIndex === -1 && this.grid.rowEditTabs.length) {
-            //  TODO: make gridAPI visible for internal use and remove cast to any
-            (this.grid as any).gridAPI.submit_value();
-            this.grid.rowEditTabs.last.element.nativeElement.focus();
-            return;
+        let prevEditableColumnIndex = this.findNextEditable(MoveDirection.LEFT, currentColumnVisibleIndex - 1);
+        if (prevEditableColumnIndex === -1) {
+            if (this.grid.rowEditTabs.length) {
+                //  TODO: make gridAPI visible for internal use and remove cast to any
+                (this.grid as any).gridAPI.submit_value();
+                this.grid.rowEditTabs.last.element.nativeElement.focus();
+                return;
+            } else {
+                // In case when row edit template is empty select last editable cell
+                prevEditableColumnIndex = this.grid.lastEditableColumnIndex;
+            }
+
         }
         this.focusEditableTarget(rowIndex, prevEditableColumnIndex);
     }
 
     public moveNextEditable(rowIndex: number, currentColumnVisibleIndex: number) {
-        const nextEditableColumnIndex = this.findNextEditable(MoveDirection.RIGHT, currentColumnVisibleIndex + 1);
-        if (nextEditableColumnIndex === -1 && this.grid.rowEditTabs.length) {
-            //  TODO: make gridAPI visible for internal use and remove cast to any
-            (this.grid as any).gridAPI.submit_value();
-            this.grid.rowEditTabs.first.element.nativeElement.focus();
-            return;
+        let nextEditableColumnIndex = this.findNextEditable(MoveDirection.RIGHT, currentColumnVisibleIndex + 1);
+        if (nextEditableColumnIndex === -1) {
+            if ( this.grid.rowEditTabs.length) {
+                 //  TODO: make gridAPI visible for internal use and remove cast to any
+                (this.grid as any).gridAPI.submit_value();
+                this.grid.rowEditTabs.first.element.nativeElement.focus();
+                return;
+            } else {
+                // In case when row edit template is empty select first editable cell
+                nextEditableColumnIndex = this.grid.firstEditableColumnIndex;
+            }
         }
         this.focusEditableTarget(rowIndex, nextEditableColumnIndex);
     }

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

@@ -23,7 +23,8 @@ import {
     IgxGridWithEditingAndFeaturesComponent,
     IgxGridRowEditingWithoutEditableColumnsComponent,
     IgxGridCustomOverlayComponent,
-    IgxGridRowEditingWithFeaturesComponent
+    IgxGridRowEditingWithFeaturesComponent,
+    IgxGridEmptyRowEditTemplateComponent
 } from '../../test-utils/grid-samples.spec';
 import { IgxGridTestComponent } from './grid.component.spec';
 
@@ -45,7 +46,8 @@ describe('IgxGrid - Row Editing #grid', () => {
                 IgxGridRowEditingWithoutEditableColumnsComponent,
                 IgxGridTestComponent,
                 IgxGridCustomOverlayComponent,
-                IgxGridRowEditingWithFeaturesComponent
+                IgxGridRowEditingWithFeaturesComponent,
+                IgxGridEmptyRowEditTemplateComponent
             ],
             imports: [
                 NoopAnimationsModule, IgxGridModule]
@@ -1912,7 +1914,7 @@ describe('IgxGrid - Row Editing #grid', () => {
 
             expect(parseInt(GridFunctions.getRowEditingBannerText(fix), 10)).toEqual(0);
             fix.componentInstance.cellInEditMode.editValue = 'Spiro';
-            fix.componentInstance.moveNext(true);
+            UIInteractions.triggerKeyDownWithBlur('tab', cell.nativeElement, true);
             tick(16);
             fix.detectChanges();
 
@@ -1923,6 +1925,41 @@ describe('IgxGrid - Row Editing #grid', () => {
             expect(grid.endEdit).toHaveBeenCalled();
             expect(grid.endEdit).toHaveBeenCalledTimes(1);
         }));
+
+        it('Empty template', fakeAsync(() => {
+            const fix = TestBed.createComponent(IgxGridEmptyRowEditTemplateComponent);
+            fix.detectChanges();
+            tick(16);
+
+            const grid = fix.componentInstance.grid;
+            let cell = grid.getCellByColumn(0, 'ProductName');
+            UIInteractions.triggerKeyDownEvtUponElem('f2', cell.nativeElement, true);
+
+            fix.detectChanges();
+            tick(16);
+
+            cell.editValue = 'Spiro';
+            UIInteractions.triggerKeyDownEvtUponElem('tab', cell.nativeElement, true);
+
+            fix.detectChanges();
+            tick(16);
+            fix.detectChanges();
+            tick(16);
+
+            expect(cell.editMode).toBe(false);
+            cell = grid.getCellByColumn(0, 'ReorderLevel');
+            expect(cell.editMode).toBe(true);
+
+            UIInteractions.triggerKeyDownEvtUponElem('tab', cell.nativeElement, true, false, true);
+            fix.detectChanges();
+            tick(16);
+            fix.detectChanges();
+            tick(16);
+
+            expect(cell.editMode).toBe(false);
+            cell = grid.getCellByColumn(0, 'ProductName');
+            expect(cell.editMode).toBe(true);
+        }));
     });
 
     describe('Transaction', () => {

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -1419,6 +1419,22 @@ export class IgxGridCustomOverlayComponent extends BasicGridComponent {
     }
 }
 
+@Component({
+    template: `
+    <igx-grid #grid [data]="data" [primaryKey]="'ProductID'" width="700px" height="400px" [rowEditable]="true">
+        <igx-column field="ProductID" header="Product ID"></igx-column>
+        <igx-column field="ReorderLevel" header="Reorder Lever" [dataType]="'number'" [editable]="true" width="100px"></igx-column>
+        <igx-column field="ProductName" header="Product Name" [dataType]="'string'" width="150px"></igx-column>
+        <igx-column field="OrderDate" header="Order Date" [dataType]="'date'" width="150px" [editable]="false"></igx-column>
+        <ng-template igxRowEdit >
+        </ng-template>
+    </igx-grid>
+    `
+})
+export class IgxGridEmptyRowEditTemplateComponent extends BasicGridComponent {
+    public data = SampleTestData.foodProductData();
+}
+
 @Component({
     template: `
     <igx-grid #grid [data]="data" [primaryKey]="'ProductID'" width="900px" height="900px" [rowEditable]="true"