feat(simple-combo): navigate to next filtered item on ArrowDown (#12686)

* feat(simple-combo): navigate to next filtered item on ArrowDown

* chore(combo.common): add abstract onArrowDown method

Author: RivaIvanova

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

@@ -8,7 +8,6 @@ import {
     EventEmitter,
     forwardRef,
     HostBinding,
-    HostListener,
     Inject,
     InjectionToken,
     Injector,
@@ -951,15 +950,6 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
         super(_displayDensityOptions);
     }
 
-    /** @hidden @internal */
-    @HostListener('keydown.ArrowDown', ['$event'])
-    @HostListener('keydown.Alt.ArrowDown', ['$event'])
-    public onArrowDown(event: Event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.open();
-    }
-
     /** @hidden @internal */
     public ngOnInit() {
         this.ngControl = this._injector.get<NgControl>(NgControl, null);
@@ -1322,6 +1312,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
     public abstract set filteredData(val: any[] | null);
 
     public abstract handleOpened();
+    public abstract onArrowDown(event: Event);
     public abstract focusSearchInput(opening?: boolean);
 
     public abstract select(newItem: any): void;

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

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import {
     AfterViewInit, ChangeDetectorRef, Component, ElementRef, NgModule, OnInit, OnDestroy,
-    Optional, Inject, Injector, ViewChild, Input, Output, EventEmitter
+    Optional, Inject, Injector, ViewChild, Input, Output, EventEmitter, HostListener
 } from '@angular/core';
 import {
     IgxComboItemDirective,
@@ -202,6 +202,15 @@ export class IgxComboComponent extends IgxComboBaseDirective implements AfterVie
         this.comboAPI.register(this);
     }
 
+    /** @hidden @internal */
+    @HostListener('keydown.ArrowDown', ['$event'])
+    @HostListener('keydown.Alt.ArrowDown', ['$event'])
+    public onArrowDown(event: Event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.open();
+    }
+
     /** @hidden @internal */
     public get displaySearchInput(): boolean {
         return this.filteringOptions.filterable || this.allowCustomValues;

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

@@ -1039,13 +1039,26 @@ describe('IgxSimpleCombo', () => {
             expect(combo.comboInput.value).toEqual('con');
             fixture.detectChanges();
 
-            UIInteractions.triggerKeyDownEvtUponElem('ArrowDown', input.nativeElement);
-            expect(document.activeElement).toHaveClass('igx-combo__content');
-
             UIInteractions.triggerKeyDownEvtUponElem('Enter', input.nativeElement);
             expect(input.nativeElement.value).toEqual('Wisconsin');
         });
 
+        it('should navigate to next filtered item on ArrowDown', () => {
+            combo.allowCustomValues = true;
+
+            input.triggerEventHandler('focus', {});
+            fixture.detectChanges();
+
+            UIInteractions.simulateTyping('con', input);
+            expect(combo.comboInput.value).toEqual('con');
+            fixture.detectChanges();
+
+            // filtered data -> Wisconsin, Connecticut
+            UIInteractions.triggerKeyDownEvtUponElem('ArrowDown', input.nativeElement);
+            UIInteractions.triggerKeyDownEvtUponElem('Enter', input.nativeElement);
+            expect(input.nativeElement.value).toEqual('Connecticut');
+        });
+
         it('should clear selection when all text in input is removed by Backspace and Delete', () => {
             combo.select('Wisconsin');
             fixture.detectChanges();

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

@@ -140,7 +140,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
             this.open();
         } else {
             if (this.virtDir.igxForOf.length > 0 && !this.selectedItem) {
-                this.dropdown.navigateFirst();
+                this.dropdown.navigateNext();
                 this.dropdownContainer.nativeElement.focus();
             } else if (this.allowCustomValues) {
                 this.addItem?.element.nativeElement.focus();