fix(filter-field): Fixes an issue where custom tag parsers are not ap…

…plied on filters set initially.

Fixes #1591

apps/dev/src/filter-field/filter-field-demo.component.html

@@ -4,6 +4,8 @@
   [disabled]="_disabled"
   label="Filter by"
   clearAllLabel="Clear all"
+  [filters]="filters"
+  [customTagParser]="customParser"
   (inputChange)="inputChange($event)"
   (filterChanges)="filterChanges($event)"
   (currentFilterChanges)="currentFilterChanges($event)"

apps/dev/src/filter-field/filter-field-demo.component.ts

@@ -22,6 +22,9 @@ import {
   DtFilterFieldCurrentFilterChangeEvent,
   DtFilterFieldDefaultDataSource,
   DtFilterFieldTag,
+  DtFilterValue,
+  DtFilterFieldTagData,
+  defaultTagDataForFilterValuesParser,
 } from '@dynatrace/barista-components/filter-field';
 
 import { COMPLEX_DATA } from './data';
@@ -235,10 +238,42 @@ export class FilterFieldDemo implements AfterViewInit, OnDestroy {
       ];
     }
   }
+
+  filters = [
+    // Free text
+    [
+      TEST_DATA.autocomplete[0],
+      TEST_DATA.autocomplete[0].autocomplete![2],
+      'foo',
+    ],
+
+    // async data
+    [TEST_DATA.autocomplete[2], (TEST_DATA_ASYNC as any).autocomplete[0]],
+
+    // option as a string
+    [TEST_DATA.autocomplete[0], TEST_DATA.autocomplete[0].autocomplete![1]],
+  ];
+
   getTagForFilter(): void {
     const rangeTag = this.filterField.getTagForFilter(blaRange);
     rangeTag!.deletable = false;
     const freeTag = this.filterField.getTagForFilter(blaFree);
     freeTag!.editable = false;
   }
+
+  customParser(
+    filterValues: DtFilterValue[],
+    editable?: boolean,
+    deletable?: boolean,
+  ): DtFilterFieldTagData | null {
+    const tagData = defaultTagDataForFilterValuesParser(
+      filterValues,
+      editable,
+      deletable,
+    );
+    if (tagData) {
+      tagData.key = '❤ ' + tagData.key;
+    }
+    return tagData;
+  }
 }

libs/barista-components/filter-field/src/filter-field.ts

@@ -200,13 +200,21 @@ export class DtFilterField<T = any>
   @Input() errorStateMatcher: ErrorStateMatcher;
 
   /** A function to override the default or injected configuration for tag parsing */
-  @Input() customTagParser:
-    | ((
-        filterValues: DtFilterValue[],
-        editable?: boolean,
-        deletable?: boolean,
-      ) => DtFilterFieldTagData | null)
-    | null = null;
+  @Input()
+  get customTagParser(): TagParserFunction | null {
+    return this._customTagParser;
+  }
+  set customTagParser(value: TagParserFunction | null) {
+    this._customTagParser = value;
+
+    if (value !== null) {
+      this.tagValuesParser = value;
+    }
+
+    this._updateTagData();
+    this._changeDetectorRef.markForCheck();
+  }
+  private _customTagParser: TagParserFunction | null = null;
 
   /** The data source instance that should be connected to the filter field. */
   @Input()