diff --git a/components/auto-complete/autocomplete-trigger.directive.ts b/components/auto-complete/autocomplete-trigger.directive.ts index c7b230517c8..5f38acce45a 100644 --- a/components/auto-complete/autocomplete-trigger.directive.ts +++ b/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(); } diff --git a/components/auto-complete/autocomplete.spec.ts b/components/auto-complete/autocomplete.spec.ts index 6c0b1f83251..9c9e3e20a1f 100644 --- a/components/auto-complete/autocomplete.spec.ts +++ b/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();