Merge pull request #7936 from IgniteUI/asteav/issue7569-9.1.x

fix(grid): Add columnHiding closing handler #7569

Author: kdinev

projects/igniteui-angular/src/lib/core/styles/components/column-hiding/_column-hiding-theme.scss

@@ -84,6 +84,7 @@
         display: flex;
         flex-flow: column nowrap;
         overflow-y: auto;
+        outline-style: none;
     }
 
     %column-hiding-item {

projects/igniteui-angular/src/lib/grids/hiding/column-hiding.component.html

@@ -1,4 +1,4 @@
-<div class="igx-column-hiding__header">
+<div class="igx-column-hiding__header" >
     <h4 class="igx-column-hiding__header-title" *ngIf="title">{{ title }}</h4>
 
     <igx-input-group class="igx-column-hiding__header-input" *ngIf="!disableFilter">
@@ -10,7 +10,7 @@ <h4 class="igx-column-hiding__header-title" *ngIf="title">{{ title }}</h4>
     </igx-input-group>
 </div>
 
-<div class="igx-column-hiding__columns"
+<div class="igx-column-hiding__columns" tabindex="0"
     [style.max-height]="columnsAreaMaxHeight">
     <igx-checkbox
         *ngFor="let columnItem of hidableColumns"

projects/igniteui-angular/src/lib/grids/pinning/column-pinning.component.html

@@ -11,7 +11,7 @@ <h4 class="igx-column-hiding__header-title" *ngIf="title">{{ title }}</h4>
     </igx-input-group>
 </div>
 
-<div class="igx-column-hiding__columns"
+<div class="igx-column-hiding__columns" tabindex="0"
     [style.max-height]="columnsAreaMaxHeight">
     <igx-checkbox igxColumnPinningItem
         *ngFor="let columnItem of pinnableColumns"

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

@@ -31,7 +31,7 @@
                 <span>{{ grid.hiddenColumnsText }}</span>
             </div>
         </button>
-        <igx-drop-down #columnHidingDropdown>
+        <igx-drop-down #columnHidingDropdown (onClosing)="onClosingColumnHiding($event)">
             <igx-column-hiding
                 [columns]="grid.columns"
                 [title]="grid.columnHidingTitle"
@@ -52,7 +52,7 @@
                 <span></span>
             </div>
         </button>
-        <igx-drop-down #columnPinningDropdown>
+        <igx-drop-down #columnPinningDropdown (onClosing)="onClosingColumnPinning($event)">
             <igx-column-pinning
                 [columns]="grid.columns"
                 [title]="grid.columnPinningTitle"

projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts

@@ -236,7 +236,7 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
         @Optional() public csvExporter: IgxCsvExporterService,
         @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions,
         private iconService: IgxIconService) {
-            super(_displayDensityOptions);
+        super(_displayDensityOptions);
     }
 
     private _positionSettings: PositionSettings = {
@@ -410,4 +410,28 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
             }
         }
     }
+
+    /**
+     * @hidden @internal
+     */
+    public onClosingColumnHiding(args) {
+        const activeElem = document.activeElement;
+
+        if (!args.event && activeElem !== this.grid.nativeElement &&
+            !this.columnHidingButton.nativeElement.contains(activeElem)) {
+            args.cancel = true;
+        }
+    }
+
+    /**
+     * @hidden @internal
+     */
+    public onClosingColumnPinning(args) {
+        const activeElem = document.activeElement;
+
+        if (!args.event && activeElem !== this.grid.nativeElement &&
+            !this.columnPinningButton.nativeElement.contains(activeElem)) {
+            args.cancel = true;
+        }
+    }
 }