fix(grid): improve focusout handling to clear active node correctly

Author: IMinchev64

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

@@ -3709,14 +3709,26 @@ 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) => {
+        fromEvent(this.nativeElement, 'focusout').pipe(filter(() => !!this.navigation.activeNode), destructor).subscribe((event: FocusEvent) => {
             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)) {
+            if (this.crudService.cell || !activeNode) {
+                return;
+            }
+            const nextFocused = event.relatedTarget as Node;
+            const activeElement = (nextFocused || this.document.activeElement) as Node;
+            const focusWithin = !!activeElement && this.nativeElement.contains(activeElement);
+            const allowClear = !(this.rowEditable && this.crudService.rowEditingBlocked && this.crudService.rowInEditMode);
+
+            if (!focusWithin && allowClear) {
+                this.clearActiveNode();
+                return;
+            }
+
+            if (((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)) &&
+                allowClear) {
                 this.clearActiveNode();
             }
         });