fix(igxTreeGrid): Re-eval correct row after collapsing. Add test. (#15329)

Author: MayaKirova

projects/igniteui-angular/src/lib/grids/common/crud.service.ts

@@ -684,12 +684,13 @@ export class IgxGridCRUDService extends IgxRowAddCrudState {
             return;
         }
         this.endEdit(true, event);
-
-        if (parentRow != null && this.grid.expansionStates.get(parentRow.key)) {
-            this.grid.collapseRow(parentRow.key);
+        // work with copy of original row, since context may change on collapse.
+        const parentRowCopy = parentRow ? Object.assign(copyDescriptors(parentRow), parentRow) : null;
+        if (parentRowCopy != null && this.grid.expansionStates.get(parentRowCopy.key)) {
+            this.grid.collapseRow(parentRowCopy.key);
         }
 
-        this.createAddRow(parentRow, asChild);
+        this.createAddRow(parentRowCopy, asChild);
 
         this.grid.transactions.startPending();
         if (this.addRowParent.isPinned) {

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-add-row-ui.spec.ts

@@ -9,6 +9,7 @@ import { IgxActionStripComponent } from '../../action-strip/public_api';
 import { IgxTreeGridRowComponent } from './tree-grid-row.component';
 import { first } from 'rxjs/operators';
 import { IRowDataCancelableEventArgs } from '../public_api';
+import { wait } from '../../test-utils/ui-interactions.spec';
 
 describe('IgxTreeGrid - Add Row UI #tGrid', () => {
     configureTestSuite();
@@ -216,5 +217,47 @@ describe('IgxTreeGrid - Add Row UI #tGrid', () => {
             const addedRow = treeGrid.getRowByKey(newRowId);
             expect(addedRow.data[treeGrid.foreignKey]).toBe(2);
         });
+
+        it('should collapse row when child row adding begins and it added row should go under correct parent.', async() => {
+            treeGrid.data = [
+                { ID: 1, ParentID: -1, Name: 'Casey Houston', JobTitle: 'Vice President', Age: 32 },
+                { ID: 2, ParentID: 10, Name: 'Gilberto Todd', JobTitle: 'Director', Age: 41 },
+                { ID: 3, ParentID: 10, Name: 'Tanya Bennett', JobTitle: 'Director', Age: 29 },
+                { ID: 4, ParentID: 6, Name: 'Jack Simon', JobTitle: 'Software Developer', Age: 33 },
+                { ID: 6, ParentID: -1, Name: 'Erma Walsh', JobTitle: 'CEO', Age: 52 },
+                { ID: 7, ParentID: 10, Name: 'Debra Morton', JobTitle: 'Associate Software Developer', Age: 35 },
+                { ID: 9, ParentID: 10, Name: 'Leslie Hansen', JobTitle: 'Associate Software Developer', Age: 44 },
+                { ID: 10, ParentID: -1, Name: 'Eduardo Ramirez', JobTitle: 'Manager', Age: 53 }
+            ];
+            fix.detectChanges();
+            treeGrid.collapseAll();
+            treeGrid.height = "350px";
+            fix.detectChanges();
+            const parentRow1 = treeGrid.rowList.toArray()[1] as IgxTreeGridRowComponent;
+            treeGrid.expandRow(parentRow1.key);
+            const parentRow2 = treeGrid.rowList.toArray()[3] as IgxTreeGridRowComponent;
+            treeGrid.expandRow(parentRow2.key);
+            treeGrid.triggerPipes();
+            fix.detectChanges();
+
+            // scroll bottom
+            treeGrid.verticalScrollContainer.scrollTo(treeGrid.dataView.length - 1);
+            await wait(50);
+            fix.detectChanges();
+            // start add row
+            parentRow2.beginAddChild();
+            fix.detectChanges();
+            // last row should be add row
+            const addRow = treeGrid.gridAPI.get_row_by_index(4);
+            expect(addRow.addRowUI).toBeTrue();
+            endTransition();
+
+            // end edit
+            treeGrid.gridAPI.crudService.endEdit(true);
+            fix.detectChanges();
+
+            // row should be added under correct parent
+            expect(treeGrid.data[treeGrid.data.length - 1].ParentID).toBe(10);
+        });
     });
 });