fix(module:auto-complete): dropdown position error with group-input (#…

…5157)

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

@@ -33,6 +33,7 @@ import {
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NzSafeAny, OnChangeType, OnTouchedType } from 'ng-zorro-antd/core/types';
+import { NzInputGroupWhitSuffixOrPrefixDirective } from 'ng-zorro-antd/input';
 
 import { fromEvent, merge, Subscription } from 'rxjs';
 import { delay, distinct, map, take, tap } from 'rxjs/operators';
@@ -95,6 +96,7 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
     private overlay: Overlay,
     private viewContainerRef: ViewContainerRef,
     private ngZone: NgZone,
+    @Optional() private nzInputGroupWhitSuffixOrPrefixDirective: NzInputGroupWhitSuffixOrPrefixDirective,
     @Optional() @Inject(DOCUMENT) private document: NzSafeAny
   ) {}
 
@@ -313,7 +315,7 @@ export class NzAutocompleteTriggerDirective implements ControlValueAccessor, OnD
   }
 
   private getConnectedElement(): ElementRef {
-    return this.elementRef;
+    return this.nzInputGroupWhitSuffixOrPrefixDirective ? this.nzInputGroupWhitSuffixOrPrefixDirective.elementRef : this.elementRef;
   }
 
   private getHostWidth(): number {

components/auto-complete/autocomplete.module.ts

@@ -13,6 +13,7 @@ import { FormsModule } from '@angular/forms';
 
 import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
 import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
+import { NzInputModule } from 'ng-zorro-antd/input';
 
 import { NzAutocompleteOptgroupComponent } from './autocomplete-optgroup.component';
 import { NzAutocompleteOptionComponent } from './autocomplete-option.component';
@@ -22,6 +23,6 @@ import { NzAutocompleteComponent } from './autocomplete.component';
 @NgModule({
   declarations: [NzAutocompleteComponent, NzAutocompleteOptionComponent, NzAutocompleteTriggerDirective, NzAutocompleteOptgroupComponent],
   exports: [NzAutocompleteComponent, NzAutocompleteOptionComponent, NzAutocompleteTriggerDirective, NzAutocompleteOptgroupComponent],
-  imports: [CommonModule, OverlayModule, FormsModule, NzOutletModule, NzNoAnimationModule]
+  imports: [CommonModule, OverlayModule, FormsModule, NzOutletModule, NzNoAnimationModule, NzInputModule]
 })
 export class NzAutocompleteModule {}

components/auto-complete/autocomplete.spec.ts

@@ -2,11 +2,22 @@ import { Directionality } from '@angular/cdk/bidi';
 import { DOWN_ARROW, ENTER, ESCAPE, TAB, UP_ARROW } from '@angular/cdk/keycodes';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { ScrollDispatcher } from '@angular/cdk/scrolling';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, NgZone, OnInit, QueryList, ViewChild, ViewChildren } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  NgZone,
+  OnInit,
+  QueryList,
+  ViewChild,
+  ViewChildren
+} from '@angular/core';
 import { async, ComponentFixture, fakeAsync, flush, inject, TestBed, tick } from '@angular/core/testing';
 import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { NzInputModule } from 'ng-zorro-antd/input';
 import { Subject } from 'rxjs';
 
 import { createKeyboardEvent, dispatchFakeEvent, dispatchKeyboardEvent, MockNgZone, typeInElement } from 'ng-zorro-antd/core/testing';
@@ -23,7 +34,7 @@ describe('auto-complete', () => {
   beforeEach(async(() => {
     const dir = 'ltr';
     TestBed.configureTestingModule({
-      imports: [NzAutocompleteModule, NoopAnimationsModule, FormsModule, ReactiveFormsModule],
+      imports: [NzAutocompleteModule, NoopAnimationsModule, FormsModule, ReactiveFormsModule, NzInputModule],
       declarations: [
         NzTestSimpleAutocompleteComponent,
         NzTestAutocompletePropertyComponent,
@@ -32,7 +43,8 @@ describe('auto-complete', () => {
         NzTestAutocompleteWithOnPushDelayComponent,
         NzTestAutocompleteWithFormComponent,
         NzTestAutocompleteWithObjectOptionComponent,
-        NzTestAutocompleteDifferentValueWithFormComponent
+        NzTestAutocompleteDifferentValueWithFormComponent,
+        NzTestAutocompleteWithGroupInputComponent
       ],
       providers: [
         { provide: Directionality, useFactory: () => ({ value: dir }) },
@@ -904,6 +916,28 @@ describe('auto-complete', () => {
       })
     );
   });
+
+  describe('group-input', () => {
+    let fixture: ComponentFixture<NzTestAutocompleteWithGroupInputComponent>;
+    let input: HTMLInputElement;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(NzTestAutocompleteWithGroupInputComponent);
+      fixture.detectChanges();
+      input = fixture.debugElement.query(By.css('input')).nativeElement;
+    });
+
+    it('should use the group-input as the dropdown target', () => {
+      const componentInstance = fixture.componentInstance;
+      fixture.detectChanges();
+      dispatchFakeEvent(input, 'blur');
+      fixture.detectChanges();
+      // tslint:disable-next-line:no-any
+      expect((componentInstance.trigger as any).getConnectedElement().nativeElement).toEqual(
+        componentInstance.inputGroupComponent.nativeElement
+      );
+    });
+  });
 });
 
 @Component({
@@ -1133,3 +1167,20 @@ class NzTestAutocompleteWithObjectOptionComponent {
     this.form = this.fb.group({ formControl: { label: 'Lucy', value: 'lucy', age: 20 } });
   }
 }
+
+@Component({
+  template: `
+    <nz-input-group #inputGroupComponent nzSize="large" [nzSuffix]="suffixIcon">
+      <input placeholder="input here" nz-input [nzAutocomplete]="auto" />
+      <ng-template #suffixIcon> </ng-template>
+      <nz-autocomplete #auto>
+        <nz-auto-option nzValue="value">label</nz-auto-option>
+      </nz-autocomplete>
+    </nz-input-group>
+  `
+})
+class NzTestAutocompleteWithGroupInputComponent {
+  @ViewChild(NzAutocompleteTriggerDirective, { static: false }) trigger: NzAutocompleteTriggerDirective;
+  @ViewChild('inputGroupComponent', { static: false, read: ElementRef }) inputGroupComponent: ElementRef;
+  constructor() {}
+}

components/input/input-group.component.ts

@@ -13,6 +13,7 @@ import {
   ChangeDetectorRef,
   Component,
   ContentChildren,
+  Directive,
   ElementRef,
   Input,
   OnChanges,
@@ -29,6 +30,13 @@ import { merge, Subject } from 'rxjs';
 import { flatMap, map, startWith, switchMap, takeUntil } from 'rxjs/operators';
 import { NzInputDirective } from './input.directive';
 
+@Directive({
+  selector: `nz-input-group[nzSuffix], nz-input-group[nzPrefix]`
+})
+export class NzInputGroupWhitSuffixOrPrefixDirective {
+  constructor(public elementRef: ElementRef) {}
+}
+
 @Component({
   selector: 'nz-input-group',
   exportAs: 'nzInputGroup',

components/input/input.module.ts

@@ -14,12 +14,18 @@ import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzAutosizeDirective } from './autosize.directive';
 import { NzInputGroupSlotComponent } from './input-group-slot.component';
-import { NzInputGroupComponent } from './input-group.component';
+import { NzInputGroupComponent, NzInputGroupWhitSuffixOrPrefixDirective } from './input-group.component';
 import { NzInputDirective } from './input.directive';
 
 @NgModule({
-  declarations: [NzInputDirective, NzInputGroupComponent, NzAutosizeDirective, NzInputGroupSlotComponent],
-  exports: [NzInputDirective, NzInputGroupComponent, NzAutosizeDirective],
+  declarations: [
+    NzInputDirective,
+    NzInputGroupComponent,
+    NzAutosizeDirective,
+    NzInputGroupSlotComponent,
+    NzInputGroupWhitSuffixOrPrefixDirective
+  ],
+  exports: [NzInputDirective, NzInputGroupComponent, NzAutosizeDirective, NzInputGroupWhitSuffixOrPrefixDirective],
   imports: [CommonModule, NzIconModule, PlatformModule, NzOutletModule]
 })
 export class NzInputModule {}