fix(grid): improve focusout handling to clear active node correctly - 21.0.x

projects/igniteui-angular/grids/grid/src/cell-merge.spec.ts

@@ -1112,6 +1112,67 @@ describe('IgxGrid - Cell merging #grid', () => {
                 ]);
             });
 
+            it('should remerge child grid cells when focus moves to parent grid.', async () => {
+                const ri = fix.componentInstance.rowIsland;
+                ri.cellMergeMode = 'always';
+                ri.getColumnByName('ProductName').merge = true;
+                fix.detectChanges();
+
+                const firstRow = grid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
+                firstRow.toggle();
+                fix.detectChanges();
+
+                const childGrid = grid.gridAPI.getChildGrids(false)[0] as IgxHierarchicalGridComponent;
+                expect(childGrid).toBeDefined();
+
+                const childCol = childGrid.getColumnByName('ProductName');
+                GridFunctions.verifyColumnMergedState(childGrid, childCol, [
+                    { value: 'Product A', span: 2 },
+                    { value: 'Product B', span: 1 },
+                    { value: 'Product A', span: 1 }
+                ]);
+
+                await wait(1);
+                fix.detectChanges();
+
+                const allGrids = fix.debugElement.queryAll(By.directive(IgxHierarchicalGridComponent));
+                const childGridDE = allGrids.find(x => x.componentInstance === childGrid);
+                expect(childGridDE).toBeDefined();
+                const childRows = childGridDE.queryAll(By.css(CSS_CLASS_GRID_ROW));
+                childRows.shift();
+                const childRowDE = childRows[0];
+                const childCells = childRowDE.queryAll(By.css('.igx-grid__td'));
+                const childCellDE = childCells[1];
+                UIInteractions.simulateClickAndSelectEvent(childCellDE.nativeElement);
+                await wait(1);
+                fix.detectChanges();
+
+                GridFunctions.verifyColumnMergedState(childGrid, childCol, [
+                    { value: 'Product A', span: 1 },
+                    { value: 'Product A', span: 1 },
+                    { value: 'Product B', span: 1 },
+                    { value: 'Product A', span: 1 }
+                ]);
+
+                const rootGridDE = allGrids.find(x => x.componentInstance === grid);
+                expect(rootGridDE).toBeDefined();
+                const parentRows = rootGridDE.queryAll(By.css(CSS_CLASS_GRID_ROW));
+                parentRows.shift();
+                const parentRowDE = parentRows[0];
+                const parentCells = parentRowDE.queryAll(By.css('.igx-grid__td'));
+                const parentCellDE = parentCells[1];
+                UIInteractions.simulateClickAndSelectEvent(parentCellDE.nativeElement);
+                parentCellDE.nativeElement.dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
+                await wait(1);
+                fix.detectChanges();
+
+                GridFunctions.verifyColumnMergedState(childGrid, childCol, [
+                    { value: 'Product A', span: 2 },
+                    { value: 'Product B', span: 1 },
+                    { value: 'Product A', span: 1 }
+                ]);
+            });
+
         });
 
         describe('TreeGrid', () => {

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

@@ -3688,17 +3688,21 @@ export abstract class IgxGridBaseDirective implements GridType,
      */
     public _setupListeners() {
         const destructor = takeUntil<any>(this.destroy$);
-        fromEvent(this.nativeElement, 'focusout').pipe(filter(() => !!this.navigation.activeNode), destructor).subscribe((event) => {
-            const activeNode = this.navigation.activeNode;
-            if (!this.crudService.cell && !!activeNode &&
-                ((event.target === this.tbody.nativeElement && activeNode.row >= 0 &&
-                    activeNode.row < this.dataView.length)
-                    || (event.target === this.theadRow.nativeElement && activeNode.row === -1)
-                    || (event.target === this.tfoot.nativeElement && activeNode.row === this.dataView.length)) &&
-                !(this.rowEditable && this.crudService.rowEditingBlocked && this.crudService.rowInEditMode)) {
-                this.clearActiveNode();
-            }
-        });
+        fromEvent(this.document, 'focusin')
+            .pipe(filter(() => !!this.navigation.activeNode), destructor)
+            .subscribe((event: FocusEvent) => {
+                if (this.crudService.cell || !this.navigation.activeNode) {
+                    return;
+                }
+                if (this.rowEditable && this.crudService.rowEditingBlocked && this.crudService.rowInEditMode) {
+                    return;
+                }
+                const target = event.target as Node;
+                if (target && this.nativeElement.contains(target)) {
+                    return;
+                }
+                Promise.resolve().then(() => this.clearActiveNode());
+            });
         this.rowAddedNotifier.pipe(destructor).subscribe(args => this.refreshGridState(args));
         this.rowDeletedNotifier.pipe(destructor).subscribe(args => {
             this.summaryService.deleteOperation = true;