fix(grid): Separate onClosing handler for hide/pin

Author: astaev

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 (onClosing)="onClosingDropDown($event)">
+        <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 (onClosing)="onClosingDropDown($event)">
+        <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 = {
@@ -414,11 +414,22 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
     /**
      * @hidden @internal
      */
-    public onClosingDropDown(args) {
+    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.columnHidingButton.nativeElement.contains(activeElem) &&
             !this.columnPinningButton.nativeElement.contains(activeElem)) {
             args.cancel = true;
         }