Merge pull request #4012 from IgniteUI/vslavov/select-nav-closed

fix(select): always focus the selected item in igx-select

Author: bazal4o

projects/igniteui-angular/src/lib/select/select.component.spec.ts

@@ -1618,6 +1618,22 @@ describe('igxSelect', () => {
             tick(500);
             fixture.detectChanges();
         }));
+
+        it('Should navigate through items when dropdown is closed and initial value is passed', fakeAsync(() => {
+            select.close();
+            tick();
+            fixture.detectChanges();
+            spyOn(select, 'navigateNext').and.callThrough();
+            const choices = select.children.toArray();
+            select.value = choices[5].value;
+            tick();
+            fixture.detectChanges();
+            select.input.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }));
+            tick();
+            fixture.detectChanges();
+            expect(select.navigateNext).toHaveBeenCalled();
+            expect(select.value).toEqual(choices[6].value);
+        }));
     });
     describe('Positioning tests: ', () => {
         const defaultWindowToListOffset = 5;

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

@@ -18,7 +18,7 @@ import { IgxSelectItemComponent } from './select-item.component';
 import { SelectPositioningStrategy } from './select-positioning-strategy';
 
 import { OverlaySettings, AbsoluteScrollStrategy } from '../services/index';
-import { IGX_DROPDOWN_BASE, ISelectionEventArgs } from '../drop-down/drop-down.common';
+import { IGX_DROPDOWN_BASE, ISelectionEventArgs, Navigate } from '../drop-down/drop-down.common';
 import { IgxSelectItemNavigationDirective } from './select-navigation.directive';
 import { CancelableEventArgs } from '../core/utils';
 import { IgxLabelDirective } from '../directives/label/label.directive';
@@ -272,7 +272,13 @@ export class IgxSelectComponent extends IgxDropDownComponent implements IgxSelec
         this.scrollToItem(this.selectedItem);
     }
 
-    /** @hidden @internal */
+    protected navigate(direction: Navigate, currentIndex?: number) {
+        if (this.collapsed && this.selectedItem) {
+            this.navigateItem(this.selectedItem.itemIndex);
+        }
+        super.navigate(direction, currentIndex);
+    }
+
     private setSelection(item: IgxDropDownItemBase) {
         if (item && item.value !== undefined && item.value !== null) {
             this.selection.set(this.id, new Set([item]));