refactor(simple-combo): bind to contentSizeChange of igxFort to prevent flicker

- close the dropdown with Alt+ArrowUp

Author: jackofdiamond5

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

@@ -43,7 +43,7 @@
     </ng-container>
     <div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'"
         [style.maxHeight.px]="itemsMaxHeight" [igxDropDownItemNavigation]="dropdown" (focus)="dropdown.onFocus()"
-        [tabindex]="dropdown.collapsed ? -1 : 0" role="listbox" [attr.id]="dropdown.id">
+        [tabindex]="dropdown.collapsed ? -1 : 0" role="listbox" [attr.id]="dropdown.id" (keydown)="handleItemKeyDown($event)">
         <igx-combo-item role="option" [singleMode]="true" [itemHeight]='itemHeight' (click)="close()" *igxFor="let item of data
             | comboFiltering:filterValue:displayKey:filteringOptions:true
             | comboGrouping:groupKey:valueKey:groupSortingDirection;

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

@@ -18,7 +18,7 @@ import { IgxButtonModule } from '../directives/button/button.directive';
 import { IgxForOfModule } from '../directives/for-of/for_of.directive';
 import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { IgxTextSelectionModule } from '../directives/text-selection/text-selection.directive';
-import { IgxToggleDirective, IgxToggleModule } from '../directives/toggle/toggle.directive';
+import { IgxToggleModule } from '../directives/toggle/toggle.directive';
 import { IgxDropDownModule } from '../drop-down/public_api';
 import { IgxIconModule, IgxIconService } from '../icon/public_api';
 import { IgxInputGroupModule, IgxInputGroupType, IGX_INPUT_GROUP_TYPE } from '../input-group/public_api';
@@ -142,14 +142,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
 
     /** @hidden @internal */
     public ngAfterViewInit() {
-        this.dropdown.opened.pipe(takeUntil(this.destroy$)).subscribe(() => {
-            if (this.composing) {
-                this.comboInput.focus();
-            }
-            if (this.comboInput.value.length === 0) {
-                this.dropdown.navigateFirst();
-                this.dropdownContainer.nativeElement.focus();
-            }
+        this.virtDir.contentSizeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
             if (this.selection.length > 0) {
                 const index = this.virtDir.igxForOf.findIndex(e => {
                     let current = e[this.valueKey];
@@ -161,6 +154,15 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
                 this.dropdown.navigateItem(index);
             }
         });
+        this.dropdown.opened.pipe(takeUntil(this.destroy$)).subscribe(() => {
+            if (this.composing) {
+                this.comboInput.focus();
+            }
+            if (this.comboInput.value.length === 0) {
+                this.dropdown.navigateFirst();
+                this.dropdownContainer.nativeElement.focus();
+            }
+        });
         this.dropdown.closed.pipe(takeUntil(this.destroy$)).subscribe(() => {
             this.composing = false;
         });
@@ -220,6 +222,13 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
         }
     }
 
+    /** @hidden @internal */
+    public handleItemKeyDown(event: KeyboardEvent) {
+        if (event.key === this.platformUtil.KEYMAP.ARROW_UP && event.altKey) {
+            this.close();
+        }
+    }
+
     /** @hidden @internal */
     public getEditElement(): HTMLElement {
         return this.comboInput.nativeElement;