diff --git a/demo/app/components/autocomplete/autocomplete.component.ts b/demo/app/components/autocomplete/autocomplete.component.ts index 5d369c08b..4a1c6058a 100644 --- 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 index 10a0faefd..44eb5c53d 100644 --- 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 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 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(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 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 index b8aa25cd1..a4682cffe 100644 --- 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; + } +}