Merge pull request #4008 from IgniteUI/nalipiev/autocomplete-horizontal

Calculate width before opening the drop down
IgniteUI · Feb 25, 2019 · 3bb621d · 3bb621d
2 parents 42a0d92 + b3635cb
commit 3bb621d
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 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
@@ -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);
         }));
+
+        it('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
@@ -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);