fix(filter-bar): don' t close if all options are selected (#DS-4530)

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

@@ -23,7 +23,6 @@ import {
 } from './filter-bar.types';
 import { KbqFilterReset } from './filter-reset';
 import { KbqFilters } from './filters';
-import { getId } from './pipes/base-pipe';
 
 @Component({
     selector: 'kbq-filter-bar, [kbq-filter-bar]',
@@ -171,30 +170,10 @@ export class KbqFilterBar {
 
         merge(this.onChangePipe, this.onRemovePipe)
             .pipe(takeUntilDestroyed())
-            .subscribe((changedPipe) => {
+            .subscribe(() => {
                 if (this.filter) {
                     this.filter.changed = true;
-
-                    // need to give out fake data. Data will be synchronized after pipe closing
-                    if (
-                        this.filter.pipes.find(
-                            (pipe) => getId(pipe) === getId(changedPipe) && pipe.value !== changedPipe.value
-                        )
-                    ) {
-                        const filter = { ...this.filter };
-
-                        filter.pipes = filter.pipes.map((pipe) => {
-                            if (getId(pipe) === getId(changedPipe)) {
-                                return changedPipe;
-                            }
-
-                            return pipe;
-                        });
-
-                        this.filterChange.emit(filter);
-                    } else {
-                        this.filterChange.emit(this.filter);
-                    }
+                    this.filterChange.emit(this.filter);
                 }
             });
 

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

@@ -38,6 +38,7 @@
             <i kbq-icon="kbq-magnifying-glass_16" kbqPrefix></i>
             <input
                 placeholder="{{ localeData.search.placeholder }}"
+                autocomplete="off"
                 kbqInput
                 type="text"
                 [formControl]="searchControl"

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

@@ -74,6 +74,10 @@ export class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> i
 
     /** selected value */
     get selected() {
+        if (this.selectedAllEqualsSelectedNothing) {
+            return this.internalSelected;
+        }
+
         return this.data.value;
     }
 
@@ -118,9 +122,12 @@ export class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> i
     }
 
     private selectionAllInProgress = false;
+    private internalSelected: KbqSelectValue[] | null;
 
     /** @docs-private */
     ngOnInit(): void {
+        this.updateInternalSelected();
+
         this.filteredOptions = merge(this.filterBar!.internalTemplatesChanges, this.searchControl.valueChanges).pipe(
             map(this.getFilteredOptions),
             takeUntilDestroyed(this.destroyRef)
@@ -139,7 +146,11 @@ export class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> i
     onSelect(item: KbqSelectValue[]) {
         if (this.selectionAllInProgress) return;
 
-        this.data.value = item;
+        if (this.selectedAllEqualsSelectedNothing && this.allVisibleOptionsSelected) {
+            this.data.value = [];
+        } else {
+            this.data.value = item;
+        }
 
         this.emitChangePipeEvent();
 
@@ -150,6 +161,8 @@ export class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> i
     onClear() {
         this.data.value = [];
 
+        this.updateInternalSelected();
+
         this.filterBar?.onClearPipe.emit(this.data);
         this.filterBar?.onChangePipe.emit(this.data);
         this.stateChanges.next();
@@ -174,7 +187,11 @@ export class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> i
 
         this.selectionAllInProgress = false;
 
-        this.data.value = [...this.select.value];
+        if (this.selectedAllEqualsSelectedNothing && this.allOptionsSelected) {
+            this.data.value = [];
+        } else {
+            this.data.value = [...this.select.value];
+        }
 
         if (emitEvent) {
             this.emitChangePipeEvent();
@@ -183,14 +200,6 @@ export class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> i
         this.stateChanges.next();
     }
 
-    private emitChangePipeEvent() {
-        if (this.selectedAllEqualsSelectedNothing && this.allOptionsSelected) {
-            this.filterBar?.onChangePipe.emit({ ...this.data, value: [] });
-        } else {
-            this.filterBar?.onChangePipe.emit(this.data);
-        }
-    }
-
     /** Comparator of selected options */
     compareByValue = (o1: any, o2: any): boolean => o1?.id === o2?.id;
 
@@ -201,9 +210,10 @@ export class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> i
         this.toggleSelectionAll();
     };
 
+    /** @docs-private */
     onClose() {
-        if (this.selectedAllEqualsSelectedNothing && this.allOptionsSelected) {
-            this.toggleSelectionAll(false);
+        if (this.allOptionsSelected) {
+            this.updateInternalSelected();
         }
     }
 
@@ -212,6 +222,20 @@ export class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> i
         this.select.open();
     }
 
+    private updateInternalSelected() {
+        if (this.selectedAllEqualsSelectedNothing) {
+            this.internalSelected = this.data.value?.slice() || [];
+        }
+    }
+
+    private emitChangePipeEvent() {
+        if (this.selectedAllEqualsSelectedNothing && this.allOptionsSelected) {
+            this.filterBar?.onChangePipe.emit({ ...this.data, value: [] });
+        } else {
+            this.filterBar?.onChangePipe.emit(this.data);
+        }
+    }
+
     private getFilteredOptions = (): KbqSelectValue[] => {
         return this.searchControl.value
             ? this.values.filter((item) => item.name.toLowerCase().includes(this.searchControl.value.toLowerCase()))

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

@@ -81,6 +81,10 @@ export class KbqPipeMultiTreeSelectComponent extends KbqBasePipe<KbqSelectValue[
 
     /** selected value */
     get selected() {
+        if (this.selectedAllEqualsSelectedNothing) {
+            return this.internalSelected;
+        }
+
         return this.data.value;
     }
 
@@ -130,6 +134,8 @@ export class KbqPipeMultiTreeSelectComponent extends KbqBasePipe<KbqSelectValue[
             .every((option) => option.selected);
     }
 
+    private internalSelected: KbqSelectValue[] | null;
+
     constructor() {
         super();
 
@@ -148,6 +154,8 @@ export class KbqPipeMultiTreeSelectComponent extends KbqBasePipe<KbqSelectValue[
     }
 
     ngOnInit(): void {
+        this.updateInternalSelected();
+
         this.searchControl.valueChanges.subscribe((value) => this.treeControl.filterNodes(value));
     }
 
@@ -176,11 +184,17 @@ export class KbqPipeMultiTreeSelectComponent extends KbqBasePipe<KbqSelectValue[
 
         this.toggleParents(option.data.parent);
 
-        this.data.value = this.select.selectedValues;
+        setTimeout(() => {
+            if (this.selectedAllEqualsSelectedNothing && this.allVisibleOptionsSelected) {
+                this.data.value = [];
+            } else {
+                this.data.value = this.select.selectedValues;
+            }
 
-        this.emitChangePipeEvent();
+            this.emitChangePipeEvent();
 
-        this.stateChanges.next();
+            this.stateChanges.next();
+        });
     }
 
     searchKeydownHandler() {
@@ -209,13 +223,19 @@ export class KbqPipeMultiTreeSelectComponent extends KbqBasePipe<KbqSelectValue[
             }
         }
 
-        this.data.value = [...this.select.selectedValues];
+        setTimeout(() => {
+            if (this.selectedAllEqualsSelectedNothing && this.allOptionsSelected) {
+                this.data.value = [];
+            } else {
+                this.data.value = [...this.select.selectedValues];
+            }
 
-        if (emitEvent) {
-            this.emitChangePipeEvent();
-        }
+            if (emitEvent) {
+                this.emitChangePipeEvent();
+            }
 
-        this.stateChanges.next();
+            this.stateChanges.next();
+        });
     }
 
     /** updates values for selection and value template */
@@ -245,13 +265,21 @@ export class KbqPipeMultiTreeSelectComponent extends KbqBasePipe<KbqSelectValue[
         setTimeout(() => this.select.open());
     }
 
+    override onClear() {
+        super.onClear();
+
+        this.updateInternalSelected();
+    }
+
+    /** @docs-private */
     onOpen() {
         this.treeControl.expandAll();
     }
 
+    /** @docs-private */
     onClose() {
-        if (this.selectedAllEqualsSelectedNothing && this.allOptionsSelected) {
-            this.toggleSelectAllNode(false);
+        if (this.allOptionsSelected) {
+            this.updateInternalSelected();
         }
     }
 
@@ -262,6 +290,12 @@ export class KbqPipeMultiTreeSelectComponent extends KbqBasePipe<KbqSelectValue[
         this.toggleSelectAllNode();
     };
 
+    private updateInternalSelected() {
+        if (this.selectedAllEqualsSelectedNothing) {
+            this.internalSelected = this.data.value?.slice() || [];
+        }
+    }
+
     private emitChangePipeEvent() {
         if (this.selectedAllEqualsSelectedNothing && this.allOptionsSelected) {
             this.filterBar?.onChangePipe.emit({ ...this.data, value: [] });

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

@@ -552,7 +552,6 @@ export class KbqPipeMultiSelectComponent extends KbqBasePipe<KbqSelectValue[]> i
     ngAfterViewInit(): void;
     ngOnInit(): void;
     onClear(): void;
-    // (undocumented)
     onClose(): void;
     onSelect(item: KbqSelectValue[]): void;
     open(): void;