fix(igx-autocomplete): reposition drop down on filter #3585

IgniteUI · Feb 7, 2019 · cac47a4 · cac47a4
1 parent 46d9e6b
commit cac47a4
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 10 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
@@ -441,6 +441,7 @@ describe('IgxAutocomplete', () => {
             filteredTowns = fixture.componentInstance.filterTowns(startsWith);
             UIInteractions.sendInput(input, startsWith, fixture);
             fixture.detectChanges();
+            tick();
             expect(dropDown.children.first.focused).toBeTruthy();
             expect(dropDown.items[0].focused).toBeTruthy();
             expect(dropDown.items[0].value).toBe(filteredTowns[0]);
@@ -475,6 +476,7 @@ describe('IgxAutocomplete', () => {
             fixture.componentInstance.onItemSelected = (args) => { args.cancel = true; };
             UIInteractions.sendInput(input, 's', fixture);
             fixture.detectChanges();
+            tick();
             UIInteractions.triggerKeyDownEvtUponElem('enter', input.nativeElement, true);
             expect(fixture.componentInstance.townSelected).toBe('s');
         }));
@@ -521,6 +523,7 @@ describe('IgxAutocomplete', () => {
             startsWith = 'w';
             UIInteractions.sendInput(input, startsWith, fixture);
             fixture.detectChanges();
+            tick();
             expect(autocomplete.onInput).toHaveBeenCalledTimes(3);
             expect(autocomplete.open).toHaveBeenCalledTimes(2);
             expect(autocomplete.dropDown.open).toHaveBeenCalledTimes(2);
@@ -581,6 +584,7 @@ describe('IgxAutocomplete', () => {
             // Check that dropdown does not preserve focus on last item
             UIInteractions.sendInput(input, 'r', fixture);
             fixture.detectChanges();
+            tick();
             expect(dropDown.items[0].focused).toBeTruthy();
             expect(dropDown.items[dropDown.items.length - 1].focused).toBeFalsy();
         }));
@@ -624,7 +628,14 @@ describe('IgxAutocomplete', () => {
             dropDown = fixture.componentInstance.dropDown;
             input.nativeElement.click();
 
-            // TODO UI test to check that drop down is shown above the input when this works
+            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.bottom).toEqual(gRect.top);
+            expect(ddRect.left).toEqual(gRect.left);
         }));
     });
     describe('Other elements integration tests', () => {
@@ -713,7 +724,7 @@ describe('IgxAutocomplete', () => {
         <igx-prefix igxRipple><igx-icon fontSet="material">home</igx-icon> </igx-prefix>
         <input igxInput name="towns" type="text" [(ngModel)]="townSelected" required
             [igxAutocomplete]='townsPanel'
-            [igxAutocomplete]='settings' (onItemSelected)="onItemSelected($event)"/>
+            [igxAutocompleteSettings]='settings' (onItemSelected)="onItemSelected($event)"/>
         <label igxLabel for="towns">Towns</label>
         <igx-suffix igxRipple><igx-icon fontSet="material">clear</igx-icon> </igx-suffix>
     </igx-input-group>
@@ -772,7 +783,7 @@ class AutocompleteInputComponent extends AutocompleteComponent {
         <igx-prefix igxRipple><igx-icon fontSet="material">home</igx-icon> </igx-prefix>
         <input igxInput name="towns" formControlName="towns" type="text" required
             [igxAutocomplete]='townsPanel'
-            [igxAutocomplete]='settings' />
+            [igxAutocompleteSettings]='settings' />
         <label igxLabel for="towns">Towns</label>
         <igx-suffix igxRipple><igx-icon fontSet="material">clear</igx-icon> </igx-suffix>
     </igx-input-group>

diff --git a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.ts
@@ -7,8 +7,7 @@ import { CommonModule } from '@angular/common';
 import { Subject } from 'rxjs';
 import { first, takeUntil } from 'rxjs/operators';
 import { CancelableEventArgs } from '../../core/utils';
-import { OverlaySettings, AbsoluteScrollStrategy, ConnectedPositioningStrategy,
-    IScrollStrategy, IPositionStrategy } from '../../services/index';
+import { OverlaySettings, AbsoluteScrollStrategy, IScrollStrategy, IPositionStrategy, AutoPositionStrategy } from '../../services/index';
 import { IgxDropDownModule, IgxDropDownComponent, ISelectionEventArgs, IgxDropDownItemNavigationDirective } from '../../drop-down/index';
 import { IgxInputGroupComponent } from '../../input-group/index';
 import { IgxOverlayOutletDirective } from '../toggle/toggle.directive';
@@ -68,7 +67,7 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
     private settings: OverlaySettings = {
         modal: false,
         scrollStrategy: new AbsoluteScrollStrategy(),
-        positionStrategy: new ConnectedPositioningStrategy({ target: this.parentElement })
+        positionStrategy: new AutoPositionStrategy({ target: this.parentElement })
     };
 
     protected id: string;
@@ -286,6 +285,16 @@ export class IgxAutocompleteDirective extends IgxDropDownItemNavigationDirective
             this.dropDown.focusedItem = firstItem;
         }
         this.cdr.detectChanges();
+
+        this.reposition();
+    }
+
+    /**
+     * If we have a custom strategy that is showing drop down above the input and after filtering is applied in the drop down,
+     * then reposition of the drop down should be called in order to align the filtered drop down to the top of the input.
+     */
+    private reposition() {
+        setTimeout(() => { this.dropDown.toggleDirective.reposition(); });
     }
 
     /**

diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts
@@ -48,10 +48,15 @@ import { OverlaySettings } from '../services';
     providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxDropDownComponent }]
 })
 export class IgxDropDownComponent extends IgxDropDownBase implements IDropDownBase, OnInit, OnDestroy {
+    protected destroy$ = new Subject<boolean>();
+
+    /**
+     * @hidden
+     * @internal
+     */
     @ViewChild(IgxToggleDirective)
-    protected toggleDirective: IgxToggleDirective;
+    public toggleDirective: IgxToggleDirective;
 
-    protected destroy$ = new Subject<boolean>();
     /**
      * @hidden
      * @internal

diff --git a/src/app/autocomplete/autocomplete.sample.html b/src/app/autocomplete/autocomplete.sample.html
@@ -10,7 +10,7 @@
                             [igxAutocomplete]='townsPanel'/>
                         <label igxLabel for="towns">Towns</label>
                     </igx-input-group>
-                    <igx-drop-down #townsPanel>
+                    <igx-drop-down #townsPanel maxHeight="400px">
                         <igx-drop-down-item *ngFor="let town of towns | startsWith:townSelected" [value]="town">
                             {{town}}
                         </igx-drop-down-item>

diff --git a/src/app/autocomplete/autocomplete.sample.ts b/src/app/autocomplete/autocomplete.sample.ts
@@ -39,7 +39,9 @@ export class AutocompleteSampleComponent {
         this.settings = {
             positionStrategy: new ConnectedPositioningStrategy({
                 closeAnimation: null,
-                openAnimation: null
+                openAnimation: null,
+                verticalDirection: VerticalAlignment.Top,
+                verticalStartPoint: VerticalAlignment.Top
             })
         };
         this.enabled = false;