Merge pull request #7964 from IgniteUI/astaev/issue7569-master

fix(grid): Handle onclosing for hiding/pin #7569

Author: DiyanDimitrov

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

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

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

@@ -11,15 +11,15 @@ <h4 [attr.id]='titleID' class="igx-column-actions__header-title" *ngIf="title">{
     </igx-input-group>
 </div>
 
-<div class="igx-column-actions__columns"
+<div class="igx-column-actions__columns" tabindex="0"
     [style.max-height]="columnsAreaMaxHeight">
     <igx-checkbox
         *ngFor="let column of columns
             | columnActionEnabled:actionsDirective.actionEnabledColumnsFilter:pipeTrigger
             | filterActionColumns:filterCriteria:pipeTrigger
             | sortActionColumns:columnDisplayOrder:pipeTrigger;"
         class="igx-column-actions__columns-item"
-    
+
         (change)="toggleColumn($event, column)"
         [checked]="actionsDirective.columnChecked(column)"
         [style.margin-left.px]="column.level * indentation">

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-actions
                 igxColumnHiding
                 [columns]="grid.columns"
@@ -52,7 +52,7 @@
                 <span></span>
             </div>
         </button>
-        <igx-drop-down #columnPinningDropdown>
+        <igx-drop-down #columnPinningDropdown (onClosing)="onClosingColumnPinning($event)">
             <igx-column-actions
                 igxColumnPinning
                 [columns]="grid.columns"

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

@@ -30,7 +30,7 @@ import { OverlaySettings, PositionSettings, HorizontalAlignment, VerticalAlignme
 import { ConnectedPositioningStrategy } from '../../services/overlay/position';
 import { GridType } from '../common/grid.interface';
 import { IgxGridIconService } from '../common/grid-icon.service';
-import { PINNING_ICONS_FONT_SET, PINNING_ICONS} from '../pinning/pinning-icons';
+import { PINNING_ICONS_FONT_SET, PINNING_ICONS } from '../pinning/pinning-icons';
 import { GridIconsFeature } from '../common/enums';
 import { IgxColumnActionsComponent } from '../column-actions/column-actions.component';
 import { IgxColumnHidingDirective } from '../column-actions/column-hiding.directive';
@@ -238,7 +238,7 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
         @Optional() public csvExporter: IgxCsvExporterService,
         @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions,
         private iconService: IgxGridIconService) {
-            super(_displayDensityOptions);
+        super(_displayDensityOptions);
     }
 
     private _positionSettings: PositionSettings = {
@@ -407,4 +407,28 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
     ngAfterViewInit() {
         this.iconService.registerSVGIcons(GridIconsFeature.RowPinning, PINNING_ICONS, PINNING_ICONS_FONT_SET);
     }
+
+    /**
+     * @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;
+        }
+    }
 }