fix(Autocomplete): fix for bug when clicking another instance (#1722)

GetTerminus · Sep 26, 2019 · b36c77a · b36c77a
1 parent 1094125
commit b36c77a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 35 deletions.
diff --git a/demo/app/components/autocomplete/autocomplete.component.ts b/demo/app/components/autocomplete/autocomplete.component.ts
@@ -1,19 +1,17 @@
 import {
   Component,
-  OnInit,
-  AfterViewInit,
   ViewChild,
 } from '@angular/core';
 import {
   FormControl,
   Validators,
 } from '@angular/forms';
+import { TsChipCollectionComponent } from '@terminus/ui/chip';
 import {
   BehaviorSubject,
   Observable,
 } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { TsChipCollectionComponent } from '@terminus/ui/chip';
 
 
 export interface State {
@@ -29,7 +27,6 @@ export interface State {
 export class AutocompleteComponent {
   @ViewChild(TsChipCollectionComponent, { static: false })
   public list!: TsChipCollectionComponent;
-
   states: State[] = [
     {
       name: 'Arkansas',
@@ -124,7 +121,6 @@ export class AutocompleteComponent {
   singleStateCtrl = new FormControl([this.states[4]], [Validators.required]);
 
   constructor() {
-
     this.filteredStates = this.myQuery$
       .pipe(
         map(state => {

diff --git a/terminus-ui/autocomplete/src/autocomplete-panel/autocomplete-trigger.directive.ts b/terminus-ui/autocomplete/src/autocomplete-panel/autocomplete-trigger.directive.ts
@@ -234,8 +234,7 @@ export class TsAutocompleteTriggerDirective<ValueType = string> implements Contr
       this.optionSelections,
       this.autocompletePanel.keyManager.tabOut.pipe(filter(() => this.overlayAttached)),
       this.closeKeyEventStream,
-      this.getOutsideClickStream(),
-      this.overlayRef ? this.overlayRef.detachments().pipe(filter(() => this.overlayAttached)) : of(),
+      this.overlayRef.backdropClick(),
     ).pipe(
       // Normalize the output so we return a consistent type.
       map(event => (event instanceof TsOptionSelectionChange ? event : null)),
@@ -471,33 +470,6 @@ export class TsAutocompleteTriggerDirective<ValueType = string> implements Contr
   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())
-      );
   }
 
 
@@ -679,10 +651,12 @@ export class TsAutocompleteTriggerDirective<ValueType = string> implements Contr
    */
   private getOverlayConfig(): OverlayConfig {
     return new OverlayConfig({
+      backdropClass: 'ts-autocomplete__backdrop',
+      direction: 'ltr',
+      hasBackdrop: true,
       positionStrategy: this.getOverlayPosition(),
       scrollStrategy: this.scrollStrategy(),
       width: this.getPanelWidth(),
-      direction: 'ltr',
     });
   }
 

diff --git a/terminus-ui/autocomplete/src/autocomplete.component.scss b/terminus-ui/autocomplete/src/autocomplete.component.scss
@@ -45,3 +45,9 @@ $chip-font-size: 14px;
     box-shadow: none;
   }
 }
+
+.cdk-overlay-container {
+  .ts-autocomplete__backdrop {
+    background: transparent;
+  }
+}