fix(module:auto-complete): can't select option when touch (#2054)

close #2053
NG-ZORRO · Aug 31, 2018 · 2e8e63d · 2e8e63d
1 parent 0e64128
commit 2e8e63d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git 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
@@ -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)">