diff --git a/components/auto-complete/autocomplete-trigger.directive.ts b/components/auto-complete/autocomplete-trigger.directive.ts index 312b1f56608..3c2432ba723 100644 --- a/components/auto-complete/autocomplete-trigger.directive.ts +++ b/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 { diff --git a/components/auto-complete/autocomplete.module.ts b/components/auto-complete/autocomplete.module.ts index 4c13e4b182b..b6c0ab7f8ab 100644 --- a/components/auto-complete/autocomplete.module.ts +++ b/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 {} diff --git a/components/auto-complete/autocomplete.spec.ts b/components/auto-complete/autocomplete.spec.ts index 4a3e4e5b2f1..0f98c6aa2c2 100644 --- a/components/auto-complete/autocomplete.spec.ts +++ b/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; + 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: ` + + + + + label + + + ` +}) +class NzTestAutocompleteWithGroupInputComponent { + @ViewChild(NzAutocompleteTriggerDirective, { static: false }) trigger: NzAutocompleteTriggerDirective; + @ViewChild('inputGroupComponent', { static: false, read: ElementRef }) inputGroupComponent: ElementRef; + constructor() {} +} diff --git a/components/input/input-group.component.ts b/components/input/input-group.component.ts index ed825e705d7..2e321429f80 100644 --- a/components/input/input-group.component.ts +++ b/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', diff --git a/components/input/input.module.ts b/components/input/input.module.ts index ffcaf142062..bf2346b30f2 100644 --- a/components/input/input.module.ts +++ b/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 {}