From 62c71fb6a8c1c2c9956c30a529258775a8d9068c Mon Sep 17 00:00:00 2001
From: Hsuan Lee <hsuangm@gmail.com>
Date: Tue, 28 Aug 2018 17:04:40 +0800
Subject: [PATCH] fix(module:auto-complete): can't select option when touch

close #2053
---
 .../nz-autocomplete-trigger.directive.ts      |  2 +-
 .../auto-complete/nz-autocomplete.spec.ts     | 24 +++++++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/components/auto-complete/nz-autocomplete-trigger.directive.ts b/components/auto-complete/nz-autocomplete-trigger.directive.ts
index 2ab6627ae66..8f1a83ad4a4 100644
--- a/components/auto-complete/nz-autocomplete-trigger.directive.ts
+++ b/components/auto-complete/nz-autocomplete-trigger.directive.ts
@@ -141,7 +141,7 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
       const clickTarget = event.target as HTMLElement;
 
       // 确保不是点击组件自身
-      if (clickTarget !== this._element.nativeElement && this.panelOpen) {
+      if (clickTarget !== this._element.nativeElement && !this.overlayRef.overlayElement.contains(clickTarget) && this.panelOpen) {
         this.closePanel();
       }
     });
diff --git a/components/auto-complete/nz-autocomplete.spec.ts b/components/auto-complete/nz-autocomplete.spec.ts
index 85183b05cce..7be1d940a28 100644
--- a/components/auto-complete/nz-autocomplete.spec.ts
+++ b/components/auto-complete/nz-autocomplete.spec.ts
@@ -213,6 +213,23 @@ describe('auto-complete', () => {
       .toEqual('');
     }));
 
+    it('should close the panel when an option is tap', fakeAsync(() => {
+      dispatchFakeEvent(input, 'focusin');
+      fixture.detectChanges();
+      flush();
+
+      const option = overlayContainerElement.querySelector('nz-auto-option') as HTMLElement;
+      dispatchFakeEvent(option, 'touchend');
+      dispatchFakeEvent(option, 'click');
+      fixture.detectChanges();
+
+      tick(500);
+      expect(fixture.componentInstance.trigger.panelOpen)
+      .toBe(false);
+      expect(overlayContainerElement.textContent)
+      .toEqual('');
+    }));
+
     it('should hide the panel when the options list is empty', fakeAsync(() => {
       dispatchFakeEvent(input, 'focusin');
       fixture.detectChanges();
@@ -371,7 +388,7 @@ describe('auto-complete', () => {
       flush();
       fixture.detectChanges();
 
-      expect(fixture.componentInstance.inputValue)
+      expect(fixture.componentInstance.inputControl.value)
       .toEqual('Downing Street');
     }));
 
@@ -402,7 +419,7 @@ describe('auto-complete', () => {
       fixture.detectChanges();
       flush();
 
-      expect(fixture.componentInstance.inputValue).toBe(200);
+      expect(fixture.componentInstance.inputControl.value).toBe(200);
     }));
 
     it('should mark the autocomplete control as touched on blur', fakeAsync(() => {
@@ -720,7 +737,7 @@ describe('auto-complete', () => {
       fixture.detectChanges();
       flush();
 
-      expect(componentInstance.inputValue)
+      expect(componentInstance.inputControl.value)
       .toContain('Downing Street');
 
       expect(input.value)
@@ -879,7 +896,6 @@ describe('auto-complete', () => {
   <div>
       <input class="input"
              nz-input
-             [(ngModel)]="inputValue"
              [formControl]="inputControl"
              [nzAutocomplete]="auto"
              (input)="onInput($event.target?.value)">