fix(IgxComboBase,IgxSimpleCombo): open the simple combo dropdown in the correct vertical direction #12648 (#12702)

Author: georgianastasov

projects/igniteui-angular/src/lib/combo/combo.common.ts

@@ -1030,6 +1030,10 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
      * ```
      */
     public toggle(): void {
+        if (this.collapsed && this._value.length !== 0) {
+            this.filterValue = '';
+            this.cdr.detectChanges();
+        }
         const overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
         this.dropdown.toggle(overlaySettings);
         if (!this.collapsed){
@@ -1046,6 +1050,10 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
      * ```
      */
     public open(): void {
+        if (this.collapsed && this._value.length !== 0) {
+            this.filterValue = '';
+            this.cdr.detectChanges();
+        }
         const overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
         this.dropdown.open(overlaySettings);
         this.setActiveDescendant();

projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts

@@ -13,7 +13,7 @@ import { IBaseCancelableBrowserEventArgs, PlatformUtil } from '../core/utils';
 import { IgxToggleModule } from '../directives/toggle/toggle.directive';
 import { IgxIconComponent, IgxIconModule, IgxIconService } from '../icon/public_api';
 import { IgxInputState } from '../input-group/public_api';
-import { AbsoluteScrollStrategy, ConnectedPositioningStrategy } from '../services/public_api';
+import { AbsoluteScrollStrategy, AutoPositionStrategy, ConnectedPositioningStrategy } from '../services/public_api';
 import { configureTestSuite } from '../test-utils/configure-suite';
 import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';
 import { IgxSimpleComboComponent, IgxSimpleComboModule, ISimpleComboSelectionChangingEventArgs } from './public_api';
@@ -811,7 +811,8 @@ describe('IgxSimpleCombo', () => {
                 declarations: [
                     IgxSimpleComboSampleComponent,
                     IgxComboInContainerTestComponent,
-                    IgxSimpleComboIconTemplatesComponent
+                    IgxSimpleComboIconTemplatesComponent,
+                    IgxBottomPositionSimpleComboComponent
                 ],
                 imports: [
                     IgxSimpleComboModule,
@@ -1387,6 +1388,52 @@ describe('IgxSimpleCombo', () => {
             clearButton = fixture.debugElement.query(By.css(`.${CSS_CLASS_CLEARBUTTON}`));
             expect(clearButton).toBeNull();
         });
+
+        it('should open the combo to the top when there is no space to open to the bottom', fakeAsync(() => {
+            fixture = TestBed.createComponent(IgxBottomPositionSimpleComboComponent);
+            fixture.detectChanges();
+            combo = fixture.componentInstance.combo;
+
+            const newSettings = {
+                positionStrategy: new AutoPositionStrategy(),
+                scrollStrategy: new AbsoluteScrollStrategy()
+            };
+            combo.overlaySettings = newSettings;
+            fixture.detectChanges();
+
+            combo.open();
+            fixture.detectChanges();
+            expect(combo.collapsed).toEqual(false);
+            expect(combo.overlaySettings.positionStrategy.settings.verticalDirection).toBe(-1);
+
+            combo.select('Connecticut');
+            fixture.detectChanges();
+
+            expect(combo.selection.length).toBe(1);
+            expect(combo.selection[0]).toEqual('Connecticut');
+            fixture.detectChanges();
+
+            combo.dropdown.close();
+            tick();
+            fixture.detectChanges();
+            expect(combo.collapsed).toEqual(true);
+
+            combo.open();
+            fixture.detectChanges();
+            expect(combo.collapsed).toEqual(false);
+            expect(combo.overlaySettings.positionStrategy.settings.verticalDirection).toBe(-1);
+
+            combo.dropdown.close();
+            tick();
+            fixture.detectChanges();
+            expect(combo.collapsed).toEqual(true);
+
+            combo.handleClear(new MouseEvent('click'));
+            fixture.detectChanges();
+            expect(combo.value).toEqual('');
+            expect(combo.collapsed).toEqual(false);
+            expect(combo.overlaySettings.positionStrategy.settings.verticalDirection).toBe(-1);
+        }));
     });
 
     describe('Display density', () => {
@@ -2198,3 +2245,47 @@ export class IgxSimpleComboBindingDataAfterInitComponent implements AfterViewIni
         });
     }
 }
+
+@Component({
+    template: `
+        <div style="display: flex; flex-direction: column; height: 100%; justify-content: flex-end;">
+            <igx-simple-combo #combo [data]="items" [displayKey]="'field'" [valueKey]="'field'" [width]="'100%'" 
+            style="margin-bottom: 60px;">
+            </igx-simple-combo>
+        </div>`
+})
+export class IgxBottomPositionSimpleComboComponent {
+    @ViewChild('combo', { read: IgxSimpleComboComponent, static: true })
+    public combo: IgxSimpleComboComponent;
+    public items: any[] = [];
+
+    constructor() {
+        const division = {
+            'New England 01': ['Connecticut', 'Maine', 'Massachusetts'],
+            'New England 02': ['New Hampshire', 'Rhode Island', 'Vermont'],
+            'Mid-Atlantic': ['New Jersey', 'New York', 'Pennsylvania'],
+            'East North Central 02': ['Michigan', 'Ohio', 'Wisconsin'],
+            'East North Central 01': ['Illinois', 'Indiana'],
+            'West North Central 01': ['Missouri', 'Nebraska', 'North Dakota', 'South Dakota'],
+            'West North Central 02': ['Iowa', 'Kansas', 'Minnesota'],
+            'South Atlantic 01': ['Delaware', 'Florida', 'Georgia', 'Maryland'],
+            'South Atlantic 02': ['North Carolina', 'South Carolina', 'Virginia'],
+            'South Atlantic 03': ['District of Columbia', 'West Virginia'],
+            'East South Central 01': ['Alabama', 'Kentucky'],
+            'East South Central 02': ['Mississippi', 'Tennessee'],
+            'West South Central': ['Arkansas', 'Louisiana', 'Oklahome', 'Texas'],
+            Mountain: ['Arizona', 'Colorado', 'Idaho', 'Montana', 'Nevada', 'New Mexico', 'Utah', 'Wyoming'],
+            'Pacific 01': ['Alaska', 'California'],
+            'Pacific 02': ['Hawaii', 'Oregon', 'Washington']
+        };
+        const keys = Object.keys(division);
+        for (const key of keys) {
+            division[key].map((e) => {
+                this.items.push({
+                    field: e,
+                    region: key.substring(0, key.length - 3)
+                });
+            });
+        }
+    }
+}

projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts

@@ -378,6 +378,8 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
         }
         this.clearSelection(true);
         if (this.collapsed) {
+            this.filterValue = '';
+            this.cdr.detectChanges();
             this.open();
             this.dropdown.navigateFirst();
         } else {