From b5c470e9c4a906c6627ab18213577d53bb564d9a Mon Sep 17 00:00:00 2001
From: Thomas Heller <thomas.heller@dynatrace.com>
Date: Wed, 8 Apr 2020 17:31:05 +0200
Subject: [PATCH] fix(filter-field): Fixes an issue where two filterfield flaps
 were open at the same time.

To ensure that only one filterfield flap is open at the same time, we need to store
the instance of the open flap in a global / module scope. If another filter field is focussed,
it should close the panels of the currently opened one and then reassign itself into the
open position.

Fixes #840
---
 .../filter-field/src/filter-field.ts          | 27 ++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/libs/barista-components/filter-field/src/filter-field.ts b/libs/barista-components/filter-field/src/filter-field.ts
index 03c7c9c5d5..fedc1f1e5d 100644
--- a/libs/barista-components/filter-field/src/filter-field.ts
+++ b/libs/barista-components/filter-field/src/filter-field.ts
@@ -153,6 +153,10 @@ export class DtFilterFieldCurrentFilterChangeEvent<T> {
 
 export const DT_FILTER_FIELD_TYPING_DEBOUNCE = 200;
 
+// We need to save the instance of the filterField that currently
+// has a flap open, to make sure we can close the old one.
+let currentlyOpenFilterField: DtFilterField<any> | null = null;
+
 @Component({
   selector: 'dt-filter-field',
   exportAs: 'dtFilterField',
@@ -254,7 +258,7 @@ export class DtFilterField<T>
       }
 
       if (this._disabled) {
-        this.closeFilterPanels();
+        this._closeFilterPanels();
 
         this.tags.forEach(item => {
           this._previousTagDisabledState.set(item, item.disabled);
@@ -479,7 +483,20 @@ export class DtFilterField<T>
       .monitor(this._elementRef.nativeElement, true)
       .pipe(takeUntil(this._destroy$))
       .subscribe(origin => {
+        // The focusMonitor fires on focus and on blur, that is why we need the check
+        // if the currentlyOpenFilterfield is not the one that is currently being
+        // focused.
+        if (
+          currentlyOpenFilterField !== null &&
+          currentlyOpenFilterField !== this
+        ) {
+          currentlyOpenFilterField._closeFilterPanels();
+        }
         this._isFocused = isDefined(origin);
+        // Assign the currently open filter field when it is focused.
+        if (this._isFocused) {
+          currentlyOpenFilterField = this;
+        }
       });
 
     // tslint:disable-next-line:no-any
@@ -521,6 +538,7 @@ export class DtFilterField<T>
   }
 
   ngOnDestroy(): void {
+    this._closeFilterPanels();
     this._focusMonitor.stopMonitoring(this._elementRef.nativeElement);
     this._stateChanges.complete();
 
@@ -601,7 +619,7 @@ export class DtFilterField<T>
         );
       }
     } else if (keyCode === ESCAPE || (keyCode === UP_ARROW && event.altKey)) {
-      this.closeFilterPanels();
+      this._closeFilterPanels();
     } else {
       if (this._inputFieldKeyboardLocked) {
         return;
@@ -1221,12 +1239,15 @@ export class DtFilterField<T>
     this._switchToRootDef(false);
   }
 
-  private closeFilterPanels(): void {
+  private _closeFilterPanels(): void {
     this._autocompleteTrigger.closePanel();
     this._filterfieldRangeTrigger.closePanel();
     if (this._editModeStashedValue) {
       this._cancelEditMode();
     }
+    if (currentlyOpenFilterField === this) {
+      currentlyOpenFilterField = null;
+    }
   }
 }
 // tslint:disable:max-file-line-count