Merge pull request #6416 from IgniteUI/nrobakova/fix-issue-4587

Stop propagation when navigating form the grid outlet

Author: kdinev

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

@@ -5896,6 +5896,15 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         this.closeRowEditingOverlay();
     }
 
+    /**
+    * @hidden
+    */
+    public gridOutletKeyboardHandler(event) {
+        // TODO: This should be removed after grid keyboard refactoring
+        // call stopPropagation for keydown event for the outlet not to propagate event to the grid
+        event.stopPropagation();
+    }
+
     // TODO: Refactor
     /**
      * Finishes the row transactions on the current row.

projects/igniteui-angular/src/lib/grids/grid/grid.component.html

@@ -292,4 +292,4 @@
 
 <igx-grid-column-resizer *ngIf="colResizingService.showResizer"></igx-grid-column-resizer>
 <div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet igxOverlayOutlet></div>
-<div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>
+<div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet (keydown)="gridOutletKeyboardHandler($event)"></div>

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html

@@ -232,4 +232,4 @@
 
 <igx-grid-column-resizer *ngIf="colResizingService.showResizer"></igx-grid-column-resizer>
 <div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet igxOverlayOutlet></div>
-<div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>
+<div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet (keydown)="gridOutletKeyboardHandler($event)"></div>

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html

@@ -212,4 +212,4 @@
 
 <igx-grid-column-resizer *ngIf="colResizingService.showResizer"></igx-grid-column-resizer>
 <div class="igx-grid__loading-outlet" #igxLoadingOverlayOutlet igxOverlayOutlet></div>
-<div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet></div>
+<div class="igx-grid__outlet" #igxFilteringOverlayOutlet igxOverlayOutlet (keydown)="gridOutletKeyboardHandler($event)"></div>