refactor(module:autocomplete): refactor autocomplete

components/auto-complete/nz-autocomplete-optgroup.component.ts

@@ -1,14 +1,10 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  TemplateRef
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector           : 'nz-auto-optgroup',
   preserveWhitespaces: false,
   changeDetection    : ChangeDetectionStrategy.OnPush,
+  encapsulation      : ViewEncapsulation.None,
   templateUrl        : './nz-autocomplete-optgroup.component.html',
   host               : {
     'role' : 'group',

components/auto-complete/nz-autocomplete-option.component.ts

@@ -5,10 +5,12 @@ import {
   ElementRef,
   EventEmitter,
   Input,
-  Output
+  Output,
+  ViewEncapsulation
 } from '@angular/core';
 
 import { InputBoolean } from '../core/util/convert';
+import { scrollIntoView } from '../core/util/scroll-into-view-if-needed'
 
 export class NzOptionSelectionChange {
   constructor(
@@ -22,6 +24,7 @@ export class NzOptionSelectionChange {
   selector           : 'nz-auto-option',
   preserveWhitespaces: false,
   changeDetection    : ChangeDetectionStrategy.OnPush,
+  encapsulation      : ViewEncapsulation.None,
   templateUrl        : './nz-autocomplete-option.component.html',
   host               : {
     'role'                                          : 'menuitem',
@@ -82,11 +85,7 @@ export class NzAutocompleteOptionComponent {
   }
 
   scrollIntoViewIfNeeded(): void {
-    /* tslint:disable-next-line:no-string-literal */
-    if (this.element.nativeElement && this.element.nativeElement[ 'scrollIntoViewIfNeeded' ]) {
-      /* tslint:disable-next-line:no-string-literal */
-      setTimeout(() => this.element.nativeElement[ 'scrollIntoViewIfNeeded' ](false), 150);
-    }
+    scrollIntoView(this.element.nativeElement);
   }
 
   selectViaInteraction(): void {

components/auto-complete/nz-autocomplete-trigger.directive.ts

@@ -79,10 +79,12 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
   private overlayBackdropClickSubscription: Subscription;
   private overlayPositionChangeSubscription: Subscription;
 
-  constructor(private elementRef: ElementRef, private _overlay: Overlay,
-              private viewContainerRef: ViewContainerRef,
-              // tslint:disable-next-line:no-any
-              @Optional() @Inject(DOCUMENT) private ngDocument: any) {
+  constructor(
+    private elementRef: ElementRef,
+    private _overlay: Overlay,
+    private viewContainerRef: ViewContainerRef,
+    // tslint:disable-next-line:no-any
+    @Optional() @Inject(DOCUMENT) private document: any) {
   }
 
   ngOnDestroy(): void {
@@ -117,11 +119,13 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
       this.nzAutocomplete.isOpen = this.panelOpen = false;
 
       if (this.overlayRef && this.overlayRef.hasAttached()) {
-        this.overlayRef.detach();
         this.selectionChangeSubscription.unsubscribe();
         this.overlayBackdropClickSubscription.unsubscribe();
         this.overlayPositionChangeSubscription.unsubscribe();
         this.optionsChangeSubscription.unsubscribe();
+        this.overlayRef.detach();
+        this.overlayRef = null;
+        this.portal = null;
       }
     }
   }
@@ -210,8 +214,8 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
    */
   private subscribeOverlayBackdropClick(): Subscription {
     return merge<MouseEvent | TouchEvent>(
-      fromEvent<MouseEvent>(this.ngDocument, 'click'),
-      fromEvent<TouchEvent>(this.ngDocument, 'touchend')
+      fromEvent<MouseEvent>(this.document, 'click'),
+      fromEvent<TouchEvent>(this.document, 'touchend')
     )
     .subscribe((event: MouseEvent | TouchEvent) => {
       const clickTarget = event.target as HTMLElement;
@@ -242,8 +246,11 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
       throw getNzAutocompleteMissingPanelError();
     }
 
-    if (!this.overlayRef) {
+    if (!this.portal) {
       this.portal = new TemplatePortal(this.nzAutocomplete.template, this.viewContainerRef);
+    }
+
+    if (!this.overlayRef) {
       this.overlayRef = this._overlay.create(this.getOverlayConfig());
     }
 

components/auto-complete/nz-autocomplete.component.ts

@@ -6,18 +6,18 @@ import {
   ContentChildren,
   ElementRef,
   EventEmitter,
-  Input, NgZone,
+  Input, NgZone, OnDestroy,
   Output,
   QueryList,
   TemplateRef,
-  ViewChild, ViewChildren
+  ViewChild, ViewChildren, ViewEncapsulation
 } from '@angular/core';
 import { defer, merge, Observable, Subscription } from 'rxjs';
 import { filter, switchMap, take } from 'rxjs/operators';
 
-import { InputBoolean } from '../core/util/convert';
-
 import { dropDownAnimation } from '../core/animation/dropdown-animations';
+import { NzDropDownPosition } from '../core/types/drop-down-position';
+import { InputBoolean } from '../core/util/convert';
 import { NzAutocompleteOptionComponent, NzOptionSelectionChange } from './nz-autocomplete-option.component';
 
 export interface AutocompleteDataSourceItem {
@@ -31,10 +31,11 @@ export type AutocompleteDataSource = AutocompleteDataSourceItem[] | string[] | n
   selector           : 'nz-autocomplete',
   preserveWhitespaces: false,
   changeDetection    : ChangeDetectionStrategy.OnPush,
+  encapsulation      : ViewEncapsulation.None,
+  templateUrl        : './nz-autocomplete.component.html',
   animations         : [
     dropDownAnimation
   ],
-  templateUrl        : './nz-autocomplete.component.html',
   styles             : [
       `
       .ant-select-dropdown {
@@ -48,7 +49,7 @@ export type AutocompleteDataSource = AutocompleteDataSourceItem[] | string[] | n
     `
   ]
 })
-export class NzAutocompleteComponent implements AfterViewInit {
+export class NzAutocompleteComponent implements AfterViewInit, OnDestroy {
 
   @Input() nzWidth: number;
   @Input() @InputBoolean() nzDefaultActiveFirstOption = true;
@@ -59,7 +60,7 @@ export class NzAutocompleteComponent implements AfterViewInit {
   showPanel: boolean = false;
   isOpen: boolean = false;
   activeItem: NzAutocompleteOptionComponent;
-  dropDownPosition: 'top' | 'center' | 'bottom' = 'bottom';
+  dropDownPosition: NzDropDownPosition = 'bottom';
 
   /**
    * Options accessor, its source may be content or dataSource
@@ -84,7 +85,8 @@ export class NzAutocompleteComponent implements AfterViewInit {
   @ViewChild('content') content: ElementRef;
 
   private activeItemIndex: number = -1;
-  private selectionChangeSubscription: Subscription;
+  private selectionChangeSubscription = Subscription.EMPTY;
+  private dataSourceChangeSubscription = Subscription.EMPTY;
   /** Options changes listener */
   readonly optionSelectionChanges: Observable<NzOptionSelectionChange> = defer(() => {
     if (this.options) {
@@ -102,6 +104,11 @@ export class NzAutocompleteComponent implements AfterViewInit {
     this.optionsInit();
   }
 
+  ngOnDestroy(): void {
+    this.dataSourceChangeSubscription.unsubscribe();
+    this.selectionChangeSubscription.unsubscribe();
+  }
+
   setVisibility(): void {
     this.showPanel = !!this.options.length;
     this.changeDetectorRef.markForCheck();
@@ -140,7 +147,7 @@ export class NzAutocompleteComponent implements AfterViewInit {
     const changes = this.nzDataSource ? this.fromDataSourceOptions.changes : this.fromContentOptions.changes;
 
     // async
-    changes.subscribe(e => {
+    this.dataSourceChangeSubscription = changes.subscribe(e => {
       if (!e.dirty && this.isOpen) {
         setTimeout(() => this.setVisibility());
       }
@@ -163,6 +170,7 @@ export class NzAutocompleteComponent implements AfterViewInit {
   }
 
   private subscribeOptionChanges(): void {
+    this.selectionChangeSubscription.unsubscribe();
     this.selectionChangeSubscription = this.optionSelectionChanges
     .pipe(filter((event: NzOptionSelectionChange) => event.isUserInput))
     .subscribe((event: NzOptionSelectionChange) => {

components/core/types/drop-down-position.ts

@@ -0,0 +1 @@
+export type NzDropDownPosition = 'top' | 'center' | 'bottom';

components/core/util/scroll-into-view-if-needed.ts

@@ -0,0 +1,15 @@
+export function scrollIntoView(node: HTMLElement): void {
+
+  // Non-standard
+  /* tslint:disable-next-line:no-string-literal */
+  if (node['scrollIntoViewIfNeeded']) {
+    /* tslint:disable-next-line:no-string-literal */
+    node['scrollIntoViewIfNeeded'](false);
+    return;
+  }
+
+  if (node.scrollIntoView) {
+    node.scrollIntoView(false);
+    return;
+  }
+}