From 82d762d21c502ca53213694a7a19e3dfc13e2575 Mon Sep 17 00:00:00 2001 From: NikolayAlipiev Date: Mon, 25 Feb 2019 16:29:22 +0200 Subject: [PATCH 1/2] fix(autocomplete): calculate width before opening the drop down #4007 --- .../autocomplete.directive.spec.ts | 32 +++++++++++++++++-- .../autocomplete/autocomplete.directive.ts | 2 +- 2 files changed, 31 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts index e6bc72c1c3c..110d156b4a8 100644 --- a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts @@ -10,7 +10,7 @@ import { IgxInputGroupModule, IgxInputGroupComponent } from '../../input-group'; import { IgxDropDownModule, IgxDropDownComponent, IgxDropDownItemNavigationDirective } from '../../drop-down'; import { FormsModule, ReactiveFormsModule, FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'; import { IgxIconModule } from '../../icon'; -import { ConnectedPositioningStrategy, VerticalAlignment } from '../../services'; +import { ConnectedPositioningStrategy, VerticalAlignment, HorizontalAlignment } from '../../services'; const CSS_CLASS_DROPDOWNLIST = 'igx-drop-down__list'; const CSS_CLASS_DROP_DOWN_ITEM = 'igx-drop-down__item'; @@ -662,7 +662,7 @@ describe('IgxAutocomplete', () => { })); }); describe('Positioning settings tests', () => { - it('Panel settings', fakeAsync(() => { + it('Panel settings - direction and startPoint: top', fakeAsync(() => { fixture = TestBed.createComponent(AutocompleteComponent); fixture.componentInstance.settings = { positionStrategy: new ConnectedPositioningStrategy({ @@ -688,6 +688,34 @@ describe('IgxAutocomplete', () => { expect(ddRect.bottom).toEqual(gRect.top); expect(ddRect.left).toEqual(gRect.left); })); + + fit('Panel settings - direction: left; StartPoint: right', fakeAsync(() => { + fixture = TestBed.createComponent(AutocompleteComponent); + fixture.componentInstance.settings = { + positionStrategy: new ConnectedPositioningStrategy({ + closeAnimation: null, + openAnimation: null, + horizontalDirection: HorizontalAlignment.Left, + horizontalStartPoint: HorizontalAlignment.Right + }) + }; + fixture.detectChanges(); + autocomplete = fixture.componentInstance.autocomplete; + group = fixture.componentInstance.group; + input = fixture.componentInstance.input; + dropDown = fixture.componentInstance.dropDown; + input.nativeElement.click(); + + UIInteractions.sendInput(input, 's', fixture); + fixture.detectChanges(); + tick(); + const dropdownListElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWNLIST)); + const ddRect = dropdownListElement.nativeElement.getBoundingClientRect(); + const gRect = group.element.nativeElement.getBoundingClientRect(); + expect(ddRect.left).toEqual(gRect.left); + expect(ddRect.right).toEqual(gRect.right); + expect(ddRect.width).toEqual(gRect.width); + })); }); describe('Other elements integration tests', () => { it('Should be instantiated properly on HTML input', fakeAsync(() => { diff --git a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts index e8be2396f36..be9e8795c4d 100644 --- a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts @@ -321,8 +321,8 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective if (!settings.positionStrategy.settings.target) { settings.positionStrategy.settings.target = this.parentElement; } - this.target.open(settings); this.target.width = this.parentElement.clientWidth + 'px'; + this.target.open(settings); this.target.onSelection.pipe(takeUntil(this.dropDownOpened$)).subscribe(this.select); this.target.onOpened.pipe(first()).subscribe(this.highlightFirstItem); this.target.children.changes.pipe(takeUntil(this.dropDownOpened$)).subscribe(this.highlightFirstItem); From 521f32ae0d25a1f22562bab729af30320baff32f Mon Sep 17 00:00:00 2001 From: Nikolay Alipiev Date: Mon, 25 Feb 2019 17:43:39 +0200 Subject: [PATCH 2/2] Remove fit #4007 --- .../lib/directives/autocomplete/autocomplete.directive.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts index 110d156b4a8..711a67113e3 100644 --- a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts @@ -689,7 +689,7 @@ describe('IgxAutocomplete', () => { expect(ddRect.left).toEqual(gRect.left); })); - fit('Panel settings - direction: left; StartPoint: right', fakeAsync(() => { + it('Panel settings - direction: left; StartPoint: right', fakeAsync(() => { fixture = TestBed.createComponent(AutocompleteComponent); fixture.componentInstance.settings = { positionStrategy: new ConnectedPositioningStrategy({