Merge pull request #9400 from IgniteUI/dTsvetkov/fix-9349-11.1.x

fix(toolbar): Fixed columnToggle emitter -11.1.x

Author: zdrawku

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

@@ -20,7 +20,7 @@ <h4 [attr.id]='titleID' class="igx-column-actions__header-title" *ngIf="title">{
             | sortActionColumns:columnDisplayOrder:pipeTrigger;"
         class="igx-column-actions__columns-item"
         [readonly]="true"
-        (click)="toggleColumn($event, column)"
+        (click)="toggleColumn(column)"
         [checked]="actionsDirective.columnChecked(column)"
         [style.margin-left.px]="column.level * indentation">
         {{ column.header || column.field }}

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

@@ -406,12 +406,9 @@ export class IgxColumnActionsComponent implements DoCheck {
     /**
      * @hidden @internal
      */
-    public toggleColumn(event: IChangeCheckboxEventArgs, column: IgxColumnComponent) {
+    public toggleColumn(column: IgxColumnComponent) {
         this.actionsDirective.toggleColumn(column);
 
-        this.onColumnToggled.emit({
-            column,
-            checked: event.checked
-        });
+        this.onColumnToggled.emit({column, checked: this.actionsDirective.columnChecked(column)});
     }
 }

projects/igniteui-angular/src/lib/grids/grid/column-hiding.spec.ts

@@ -159,31 +159,31 @@ describe('Column Hiding UI #grid', () => {
 
             expect(columnChooser.onColumnToggled.emit).toHaveBeenCalledTimes(1);
             expect(columnChooser.onColumnToggled.emit).toHaveBeenCalledWith(
-                { column: grid.getColumnByName('ReleaseDate'), checked: undefined });
+                { column: grid.getColumnByName('ReleaseDate'), checked: false });
             expect(grid.columnVisibilityChanging.emit).toHaveBeenCalledTimes(1);
             expect(grid.onColumnVisibilityChanged.emit).toHaveBeenCalledTimes(1);
 
             GridFunctions.clickColumnChooserItem(columnChooserElement, 'ReleaseDate');
 
             expect(columnChooser.onColumnToggled.emit).toHaveBeenCalledTimes(2);
             expect(columnChooser.onColumnToggled.emit).toHaveBeenCalledWith(
-                { column: grid.getColumnByName('ReleaseDate'), checked: undefined });
+                { column: grid.getColumnByName('ReleaseDate'), checked: true });
             expect(grid.columnVisibilityChanging.emit).toHaveBeenCalledTimes(2);
             expect(grid.onColumnVisibilityChanged.emit).toHaveBeenCalledTimes(2);
 
             GridFunctions.clickColumnChooserItem(columnChooserElement, 'Downloads');
 
             expect(columnChooser.onColumnToggled.emit).toHaveBeenCalledTimes(3);
             expect(columnChooser.onColumnToggled.emit).toHaveBeenCalledWith(
-                { column: grid.getColumnByName('Downloads'), checked: undefined });
+                { column: grid.getColumnByName('Downloads'), checked: true });
             expect(grid.columnVisibilityChanging.emit).toHaveBeenCalledTimes(3);
             expect(grid.onColumnVisibilityChanged.emit).toHaveBeenCalledTimes(3);
 
             GridFunctions.clickColumnChooserItem(columnChooserElement, 'Downloads');
 
             expect(columnChooser.onColumnToggled.emit).toHaveBeenCalledTimes(4);
             expect(columnChooser.onColumnToggled.emit).toHaveBeenCalledWith(
-                { column: grid.getColumnByName('Downloads'), checked: undefined });
+                { column: grid.getColumnByName('Downloads'), checked: false });
             expect(grid.columnVisibilityChanging.emit).toHaveBeenCalledTimes(4);
             expect(grid.onColumnVisibilityChanged.emit).toHaveBeenCalledTimes(4);
         });

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

@@ -1,5 +1,5 @@
 import { Directive, Host, Input, EventEmitter, OnDestroy, Output } from '@angular/core';
-import { Subject } from 'rxjs';
+import { Subject, Subscription } from 'rxjs';
 import { first, takeUntil } from 'rxjs/operators';
 import { IgxToggleDirective, ToggleViewCancelableEventArgs, ToggleViewEventArgs } from '../../directives/toggle/toggle.directive';
 import {
@@ -72,6 +72,7 @@ export abstract class BaseToolbarDirective implements OnDestroy {
     public columnToggle = new EventEmitter<IColumnToggledEventArgs>();
 
     private $destroyer = new Subject<boolean>();
+    private $sub: Subscription;
 
     /**
      * Returns the grid containing this component.
@@ -89,7 +90,7 @@ export abstract class BaseToolbarDirective implements OnDestroy {
     /** @hidden @internal */
     public toggle(anchorElement: HTMLElement, toggleRef: IgxToggleDirective, actions?: IgxColumnActionsComponent): void {
         if (actions) {
-            this._setupListeners(toggleRef);
+            this._setupListeners(toggleRef, actions);
             const setHeight = () => actions.columnsAreaMaxHeight = this.columnListHeight ?? `${Math.max(this.grid.calcHeight, 200)}px`;
             toggleRef.onOpening.pipe(first()).subscribe(setHeight);
         }
@@ -103,7 +104,14 @@ export abstract class BaseToolbarDirective implements OnDestroy {
         columnActions.querySelector('input')?.focus();
     }
 
-    private _setupListeners(toggleRef: IgxToggleDirective) {
+    private _setupListeners(toggleRef: IgxToggleDirective, actions? : IgxColumnActionsComponent) {
+        if (actions){
+            if (!this.$sub || this.$sub.closed){
+                this.$sub = actions.onColumnToggled.subscribe((event) => this.columnToggle.emit(event));
+            }else {
+                this.$sub.unsubscribe();
+            }
+        }
         /** The if statement prevents emitting open and close events twice  */
         if (toggleRef.collapsed) {
             toggleRef.onOpening.pipe(first(), takeUntil(this.$destroyer)).subscribe((event) => this.opening.emit(event));