fix(filter-bar): event is emitted 2 times when selecting and closing a filter (#DS-3862)

Author: lskramarov

packages/components/filter-bar/filter-bar.karma-spec.ts

@@ -498,11 +498,7 @@ describe('KbqFilterBar', () => {
 @Component({
     selector: 'test-app',
     template: `
-        <kbq-filter-bar
-            [(filter)]="activeFilter"
-            [pipeTemplates]="pipeTemplates"
-            (filterChange)="onFilterChange($event)"
-        >
+        <kbq-filter-bar [(filter)]="activeFilter" [pipeTemplates]="pipeTemplates">
             <kbq-filters
                 [filters]="filters"
                 (onChangeFilter)="onChangeFilter($event)"
@@ -516,7 +512,7 @@ describe('KbqFilterBar', () => {
                 <ng-container *kbqPipe="pipe" />
             }
 
-            <kbq-pipe-add (onAddPipe)="onAddPipe($event)" />
+            <kbq-pipe-add />
 
             <kbq-filter-reset (onResetFilter)="onResetFilter($event)" />
 
@@ -1056,25 +1052,14 @@ class BaseFunctions {
         }
     ];
 
-    onAddPipe(pipe: KbqPipeTemplate) {
-        console.log('onAddPipe: ', pipe);
-    }
-
-    onFilterChange(filter: KbqFilter | null) {
-        console.log('onFilterChange: ', filter);
-    }
-
     onSelectFilter(filter: KbqFilter) {
-        console.log('onSelectFilter: ', filter);
-
         this.activeFilter = filter;
     }
 
     onSaveAsNewFilter({ filter, filterBar }) {
         this.filters.push(filter);
 
         filterBar.filters.filterSavedSuccessfully();
-        // filterBar.filters.filterSavedUnsuccessfully({ nameAlreadyExists: true, text: 'custom error text' });
     }
 
     onSaveFilter({ filter, filterBar }) {

packages/components/filter-bar/pipes/pipe-multi-select.ts

@@ -134,7 +134,13 @@ export class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> i
         if (this.selectionAllInProgress) return;
 
         this.data.value = item;
-        this.filterBar?.onChangePipe.emit(this.data);
+
+        if (this.allOptionsSelected) {
+            this.filterBar?.onChangePipe.emit({ ...this.data, value: [] });
+        } else {
+            this.filterBar?.onChangePipe.emit(this.data);
+        }
+
         this.stateChanges.next();
     }
 
@@ -154,7 +160,7 @@ export class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> i
     }
 
     /** @docs-private */
-    toggleSelectionAll() {
+    toggleSelectionAll(emitEvent: boolean = true) {
         this.selectionAllInProgress = true;
 
         if (this.allVisibleOptionsSelected) {
@@ -166,7 +172,15 @@ export class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> i
         this.selectionAllInProgress = false;
 
         this.data.value = [...this.select.value];
-        this.filterBar?.onChangePipe.emit(this.data);
+
+        if (emitEvent) {
+            if (this.allOptionsSelected) {
+                this.filterBar?.onChangePipe.emit({ ...this.data, value: [] });
+            } else {
+                this.filterBar?.onChangePipe.emit(this.data);
+            }
+        }
+
         this.stateChanges.next();
     }
 
@@ -175,7 +189,7 @@ export class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> i
 
     onClose() {
         if (this.allOptionsSelected) {
-            this.toggleSelectionAll();
+            this.toggleSelectionAll(false);
         }
     }
 

packages/components/filter-bar/pipes/pipe-multi-tree-select.ts

@@ -164,7 +164,13 @@ export class KbqPipeMultiTreeSelectComponent extends KbqBasePipe<KbqSelectValue[
         this.toggleParents(option.data.parent);
 
         this.data.value = this.select.selectedValues;
-        this.filterBar?.onChangePipe.emit(this.data);
+
+        if (this.allOptionsSelected) {
+            this.filterBar?.onChangePipe.emit({ ...this.data, value: [] });
+        } else {
+            this.filterBar?.onChangePipe.emit(this.data);
+        }
+
         this.stateChanges.next();
     }
 
@@ -174,7 +180,7 @@ export class KbqPipeMultiTreeSelectComponent extends KbqBasePipe<KbqSelectValue[
         }
     }
 
-    toggleSelectAllNode() {
+    toggleSelectAllNode(emitEvent: boolean = true) {
         if (this.select.search?.ngControl.value) {
             const renderedOptions = this.tree.renderedOptions.filter(({ value }) => value !== kbqTreeSelectAllValue);
 
@@ -196,7 +202,14 @@ export class KbqPipeMultiTreeSelectComponent extends KbqBasePipe<KbqSelectValue[
 
         this.data.value = [...this.select.selectedValues];
 
-        this.filterBar?.onChangePipe.emit(this.data);
+        if (emitEvent) {
+            if (this.allOptionsSelected) {
+                this.filterBar?.onChangePipe.emit({ ...this.data, value: [] });
+            } else {
+                this.filterBar?.onChangePipe.emit(this.data);
+            }
+        }
+
         this.stateChanges.next();
     }
 
@@ -233,7 +246,7 @@ export class KbqPipeMultiTreeSelectComponent extends KbqBasePipe<KbqSelectValue[
 
     onClose() {
         if (this.allOptionsSelected) {
-            this.toggleSelectAllNode();
+            this.toggleSelectAllNode(false);
         }
     }
 

packages/docs-examples/components/filter-bar/filter-bar-pipe-types/filter-bar-pipe-types-example.ts

@@ -39,7 +39,7 @@ const DATA_OBJECT = {
         LuxonDateModule
     ],
     template: `
-        <kbq-filter-bar [(filter)]="activeFilter" [pipeTemplates]="pipeTemplates">
+        <kbq-filter-bar [(filter)]="activeFilter" [pipeTemplates]="pipeTemplates" (onChangePipe)="onChangePipe($event)">
             @for (pipe of activeFilter.pipes; track pipe) {
                 <ng-container *kbqPipe="pipe" />
             }
@@ -148,6 +148,10 @@ export class FilterBarPipeTypesExample {
         this.activeFilter = this.getDefaultFilter();
     }
 
+    onChangePipe($event) {
+        console.log('onChangePipe: ', $event);
+    }
+
     getDefaultFilter(): KbqFilter {
         return {
             name: '',

tools/public_api_guard/components/filter-bar.api.md

@@ -537,7 +537,7 @@ export class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> i
     searchControl: UntypedFormControl;
     select: KbqSelect;
     get selected(): KbqSelectValue[] | null;
-    toggleSelectionAll(): void;
+    toggleSelectionAll(emitEvent?: boolean): void;
     toggleSelectionAllByEnterKey(): void;
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqPipeMultiSelectComponent, "kbq-pipe-multi-select", never, {}, {}, never, never, true, never>;