fix(Autocomplete): selecting a second autocomplete now working (#1673)

GetTerminus · Aug 30, 2019 · eacf941 · eacf941
1 parent f0409a6
commit eacf941
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 1 deletion.
diff --git a/terminus-ui/autocomplete/src/autocomplete-panel/autocomplete-trigger.directive.ts b/terminus-ui/autocomplete/src/autocomplete-panel/autocomplete-trigger.directive.ts
@@ -51,6 +51,7 @@ import {
   map,
   switchMap,
   take,
+  takeUntil,
   tap,
 } from 'rxjs/operators';
 
@@ -478,10 +479,39 @@ export class TsAutocompleteTriggerDirective<ValueType = string> implements Contr
 
   /**
    * Open the autocomplete suggestion panel
+   * Subscribe to click event stream and if two conditions described below met,
+   * close the panel.
    */
   public openPanel(): void {
     this.attachOverlay();
     this.floatLabel();
+    this.overlayClickOutside(this.overlayRef, this.elementRef.nativeElement).subscribe(() => this.closePanel());
+  }
+
+  /**
+   * Generate document’s click event stream,
+   * when a click meets two conditions:
+   * 1) The click target isn’t the origin.
+   * 2) The click target isn’t the panel or any one of its children.
+   * @param overlayRef
+   * @param origin
+   * @return observable
+   */
+
+  public overlayClickOutside(overlayRef: OverlayRef | null | undefined, origin: HTMLElement) {
+    if (!overlayRef) {
+      return of();
+    }
+    return fromEvent<MouseEvent>(document, 'click')
+      .pipe(
+        filter(event => {
+          const clickTarget = event.target as HTMLElement;
+          const notOrigin = clickTarget !== origin;
+          const notOverlay = !!overlayRef && (!overlayRef.overlayElement.contains(clickTarget));
+          return notOrigin && notOverlay;
+        }),
+        takeUntil(overlayRef.detachments())
+      );
   }
 
 
@@ -858,7 +888,6 @@ export class TsAutocompleteTriggerDirective<ValueType = string> implements Contr
       });
   }
 
-
   /**
    * Event handler for when the window is blurred.
    *

diff --git a/terminus-ui/autocomplete/src/autocomplete.component.spec.ts b/terminus-ui/autocomplete/src/autocomplete.component.spec.ts
@@ -476,6 +476,23 @@ describe(`TsAutocompleteComponent`, function() {
       expect(instance.panelOpen).toEqual(false);
     });
 
+    test(`should close the panel if focus on another autocomplete instance`, () => {
+      const fixture = createComponent(testComponents.MultipleAutocomplete);
+      fixture.detectChanges();
+      const input2 = getAutocompleteInput(fixture, 1);
+      const instance = getAutocompleteInstance(fixture);
+      const triggerinstance = instance.autocompleteTrigger;
+
+      instance.focus();
+      triggerinstance.openPanel();
+      fixture.detectChanges();
+      expect(triggerinstance.panelOpen).toEqual(true);
+
+      input2.click();
+      fixture.detectChanges();
+      expect(instance.panelOpen).toEqual(false);
+    });
+
 
     test(`should update the overlay position when a chip is removed`, function() {
       jest.useFakeTimers();

diff --git a/terminus-ui/autocomplete/testing/src/test-components.ts b/terminus-ui/autocomplete/testing/src/test-components.ts
@@ -189,6 +189,58 @@ export class Autocomplete {
   }
 }
 
+@Component({
+  template: `
+    <ts-autocomplete
+      [formControl]="myCtrl"
+      [allowMultiple]="allowMultiple"
+      [reopenAfterSelection]="keepOpen"
+      [showProgress]="showProgress"
+      [isDisabled]="disabled"
+    >
+      <ts-option
+        *ngFor="let option of states"
+        [value]="option"
+        [option]="option"
+        [isDisabled]="option?.disabled"
+      >
+        {{ option.foo }}
+      </ts-option>
+    </ts-autocomplete>
+
+    <ts-autocomplete
+      [formControl]="secondCtrl"
+      [allowMultiple]="allowMultiple"
+      [reopenAfterSelection]="keepOpen"
+      [showProgress]="showProgress"
+      [isDisabled]="disabled"
+    >
+      <ts-option
+        *ngFor="let option of states"
+        [value]="option"
+        [option]="option"
+        [isDisabled]="option?.disabled"
+      >
+        {{ option.foo }}
+      </ts-option>
+    </ts-autocomplete>
+  `,
+})
+export class MultipleAutocomplete {
+  public myCtrl = new FormControl();
+  public secondCtrl = new FormControl();
+  public states: State[] = STATES.slice();
+  public showProgress = false;
+  public allowMultiple = true;
+  public keepOpen = true;
+  public disabled: boolean | undefined;
+  public change = v => { };
+
+  public changeOptionsLength() {
+    this.states = STATES.slice(0, 5);
+  }
+}
+
 @Component({
   template: `
     <ts-autocomplete
@@ -796,6 +848,7 @@ export class OptgroupBadIDs {
     Hint,
     Id,
     Label,
+    MultipleAutocomplete,
     NullSelection,
     OptgroupBadIDs,
     OptgroupIDs,