fix(module:auto-complete): not emit changes when retype same value wh…

…ile open (#4215) * fix(module:auto-complete): not emit changes when retype same value while open * test(module:auto-complete): add test
NG-ZORRO · Oct 12, 2019 · 21e91e3 · 21e91e3
1 parent 63f947e
commit 21e91e3
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 5 deletions.
diff --git a/components/auto-complete/nz-autocomplete-trigger.directive.ts b/components/auto-complete/nz-autocomplete-trigger.directive.ts
@@ -178,15 +178,20 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
 
   handleInput(event: KeyboardEvent): void {
     const target = event.target as HTMLInputElement;
+    const document = this.document as Document;
     let value: number | string | null = target.value;
 
-    if (this.canOpen() && document.activeElement === target && this.previousValue !== value) {
-      if (target.type === 'number') {
-        value = value === '' ? null : parseFloat(value);
-      }
+    if (target.type === 'number') {
+      value = value === '' ? null : parseFloat(value);
+    }
 
+    if (this.previousValue !== value) {
+      this.previousValue = value;
       this._onChange(value);
-      this.openPanel();
+
+      if (this.canOpen() && document.activeElement === event.target) {
+        this.openPanel();
+      }
     }
   }
 
@@ -345,6 +350,9 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
 
   private setTriggerValue(value: string | number | null): void {
     this.elementRef.nativeElement.value = value || '';
+    if (!this.nzAutocomplete.nzBackfill) {
+      this.previousValue = value;
+    }
   }
 
   private doBackfill(): void {

diff --git a/components/auto-complete/nz-autocomplete.spec.ts b/components/auto-complete/nz-autocomplete.spec.ts
@@ -97,6 +97,13 @@ describe('auto-complete', () => {
       expect(overlayContainerElement.textContent).toContain('Burns Bay Road');
     });
 
+    it('should open the panel when type', () => {
+      expect(fixture.componentInstance.trigger.panelOpen).toBe(false);
+      typeInElement('value', input);
+      fixture.detectChanges();
+      expect(fixture.componentInstance.trigger.panelOpen).toBe(true);
+    });
+
     it('should not open the panel on focus if the input is readonly', fakeAsync(() => {
       const trigger = fixture.componentInstance.trigger;
       input.readOnly = true;
@@ -411,6 +418,12 @@ describe('auto-complete', () => {
       flush();
 
       expect(fixture.componentInstance.inputControl.value).toBe(200);
+
+      typeInElement('', input);
+      fixture.detectChanges();
+      flush();
+
+      expect(fixture.componentInstance.inputControl.value).toBe(null);
     }));
 
     it('should mark the autocomplete control as touched on blur', fakeAsync(() => {
@@ -423,6 +436,29 @@ describe('auto-complete', () => {
       flush();
       expect(fixture.componentInstance.inputControl.touched).toBe(true);
     }));
+
+    it('should be able to re-type the same value when it is reset while open', fakeAsync(() => {
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+      flush();
+      fixture.detectChanges();
+
+      typeInElement('Burns', input);
+      flush();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.inputControl.value).toBe('Burns');
+
+      fixture.componentInstance.inputControl.setValue('');
+      fixture.detectChanges();
+      expect(input.value).toBe('');
+
+      typeInElement('Burns', input);
+      flush();
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.inputControl.value).toBe('Burns');
+    }));
   });
 
   describe('form', () => {