fix(module:auto-complete): should open the popover when the focused input is clicked (#8900)

Author: WwwHhhYran

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

@@ -60,7 +60,8 @@ export function getNzAutocompleteMissingPanelError(): Error {
     '(focusin)': 'handleFocus()',
     '(blur)': 'handleBlur()',
     '(input)': 'handleInput($event)',
-    '(keydown)': 'handleKeydown($event)'
+    '(keydown)': 'handleKeydown($event)',
+    '(click)': 'handleClick($event)'
   }
 })
 export class NzAutocompleteTriggerDirective implements AfterViewInit, ControlValueAccessor, OnDestroy {
@@ -217,6 +218,12 @@ export class NzAutocompleteTriggerDirective implements AfterViewInit, ControlVal
     }
   }
 
+  handleClick(): void {
+    if (this.canOpen() && !this.panelOpen) {
+      this.openPanel();
+    }
+  }
+
   handleBlur(): void {
     this.onTouched();
   }

components/auto-complete/autocomplete.spec.ts

@@ -213,6 +213,23 @@ describe('auto-complete', () => {
       expect(overlayContainerElement.textContent).toEqual('');
     }));
 
+    it('should open the panel when the input that has already been focused is clicked', fakeAsync(() => {
+      dispatchFakeEvent(input, 'focusin');
+      fixture.detectChanges();
+      flush();
+
+      const option = overlayContainerElement.querySelector('nz-auto-option') as HTMLElement;
+      option.click();
+      fixture.detectChanges();
+
+      tick(500);
+      expect(fixture.componentInstance.trigger.panelOpen).toBe(false);
+
+      dispatchFakeEvent(input, 'click');
+      fixture.detectChanges();
+      expect(fixture.componentInstance.trigger.panelOpen).toBe(true);
+    }));
+
     it('should close the panel when an option is tap', fakeAsync(() => {
       dispatchFakeEvent(input, 'focusin');
       fixture.detectChanges();