fix(filter-field): Fixes an issue with validation flickering on free …

…text. Fixes dynatrace-oss#1180
yngrdyn · Nov 9, 2020 · ff5c4e5 · ff5c4e5
1 parent 0e91a4a
commit ff5c4e5
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/libs/barista-components/filter-field/src/filter-field-validation.ts b/libs/barista-components/filter-field/src/filter-field-validation.ts
@@ -28,7 +28,7 @@ export interface DtFilterFieldValidator {
 export class DtFilterFieldControl extends FormControl {
   constructor(private _validators: DtFilterFieldValidator[] = []) {
     super(
-      null,
+      '',
       _validators.map((validator) => validator.validatorFn),
       null,
     );

diff --git a/libs/barista-components/filter-field/src/filter-field.ts b/libs/barista-components/filter-field/src/filter-field.ts
@@ -945,7 +945,11 @@ export class DtFilterField<T = any>
 
   /** Write a value to the filter field control if there is a control active */
   private _writeControlValue(value: string): void {
-    if (this._control) {
+    // Only write the value when it is actually different
+    // setting the value to it's old value and marking the control
+    // dirty will trigger validation too many times, resulting in a flickering
+    // of the validation flag.
+    if (this._control && this._control.value !== value) {
       this._control.setValue(value);
       this._control.markAsDirty();
       this._control.markAsTouched();