fix(filter-field): Improving multiselect uid generation; clearing sel…

…ected list on delete.
dynatrace-oss · May 10, 2021 · 94ffa9a · 94ffa9a
1 parent ce4f5ff
commit 94ffa9a
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 3 deletions.
diff --git a/apps/components-e2e/src/components/sunburst-chart/sunburst-chart.module.ts b/apps/components-e2e/src/components/sunburst-chart/sunburst-chart.module.ts
@@ -17,14 +17,20 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { Route, RouterModule } from '@angular/router';
+import { DtOverlayModule } from '@dynatrace/barista-components/overlay';
 import { DtSunburstChartModule } from '@dynatrace/barista-components/sunburst-chart';
 import { DtE2ESunburstChart } from './sunburst-chart';
 
 const routes: Route[] = [{ path: '', component: DtE2ESunburstChart }];
 
 @NgModule({
   declarations: [DtE2ESunburstChart],
-  imports: [CommonModule, RouterModule.forChild(routes), DtSunburstChartModule],
+  imports: [
+    CommonModule,
+    DtOverlayModule,
+    RouterModule.forChild(routes),
+    DtSunburstChartModule,
+  ],
   exports: [],
   providers: [],
 })

diff --git a/libs/barista-components/filter-field/src/filter-field.ts b/libs/barista-components/filter-field/src/filter-field.ts
@@ -1478,6 +1478,8 @@ export class DtFilterField<T = any>
       }
       this._resetEditMode();
       this._closeFilterPanels();
+
+      this._multiSelect._setInitialSelection([]);
       this._stateChanges.next();
       this._changeDetectorRef.markForCheck();
     }
@@ -1798,11 +1800,17 @@ export class DtFilterField<T = any>
     const ids = new Set<string>();
     for (const currentFilter of this._filters) {
       let currentId = '';
-      for (const value of currentFilter) {
+
+      for (const [index, value] of currentFilter.entries()) {
         if (isDtAutocompleteValue(value)) {
           const id = peekOptionId(value, currentId);
           ids.add(id);
-          currentId = id;
+
+          // In case of multiSelect filter type, the id must not be concatenated.
+          // So it'll only use the first value which is the parent
+          if (!isDtMultiSelectValue(currentFilter[0]) || index === 0) {
+            currentId = id;
+          }
         }
       }
     }

diff --git a/libs/examples/src/sunburst-chart/BUILD.bazel b/libs/examples/src/sunburst-chart/BUILD.bazel
@@ -20,6 +20,7 @@ ng_module(
     tsconfig = "//libs/examples:tsconfig_lib",
     deps = [
         "//libs/barista-components/button:compile",
+        "//libs/barista-components/overlay:compile",
         "//libs/barista-components/formatters:compile",
         "//libs/barista-components/sunburst-chart:compile",
         "//libs/barista-components/theming:compile",

diff --git a/libs/examples/src/sunburst-chart/sunburst-chart-examples.module.ts b/libs/examples/src/sunburst-chart/sunburst-chart-examples.module.ts
@@ -16,6 +16,7 @@
 
 import { NgModule } from '@angular/core';
 import { DtButtonModule } from '@dynatrace/barista-components/button';
+import { DtOverlayModule } from '@dynatrace/barista-components/overlay';
 import { DtSunburstChartModule } from '@dynatrace/barista-components/sunburst-chart';
 import { DtThemingModule } from '@dynatrace/barista-components/theming';
 import { DtExampleSunburstChartCustomColor } from './sunburst-chart-custom-color-example/sunburst-chart-custom-color-example';
@@ -29,6 +30,7 @@ import { DtFormattersModule } from '@dynatrace/barista-components/formatters';
     DtButtonModule,
     DtThemingModule,
     DtFormattersModule,
+    DtOverlayModule,
   ],
   declarations: [
     DtExampleSunburstChartDefault,