diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts index 3c957ecde08..35055901820 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -881,6 +881,22 @@ describe('igxCombo', () => { }); }); }); + + it('Should properly get the first focusable item when focusing the component list', fakeAsync(() => { + const fixture = TestBed.createComponent(IgxComboInputTestComponent); + fixture.detectChanges(); + const combo = fixture.componentInstance.combo; + spyOn(combo.dropdown, 'getFirstSelectableItem').and.callThrough(); + combo.toggle(); + tick(); + fixture.detectChanges(); + combo.searchInput.nativeElement.dispatchEvent(new KeyboardEvent('keypress', { key: 'Tab'})); + (document.getElementsByClassName('igx-combo__content')[0]).dispatchEvent(new Event('focus')); + tick(); + fixture.detectChanges(); + expect(combo.dropdown.getFirstSelectableItem).toHaveBeenCalledTimes(1); + expect((combo.dropdown.focusedItem.element.nativeElement).textContent.trim()).toEqual('Michigan'); + })); }); diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts index 1f61391c386..cefdd64da0a 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts @@ -552,6 +552,12 @@ export abstract class IgxDropDownBase implements OnInit, IToggleView { this._focusedItem.isFocused = true; } } + /** + * @hidden + */ + public getFirstSelectableItem() { + return this.children.find(child => !child.isHeader && !child.disabled); + } } /** 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 index 50e6332a26c..92afaff2b4c 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts @@ -43,6 +43,13 @@ export class IgxDropDownItemNavigationDirective { set target(target: IgxDropDownBase) { this._target = target ? target : this.dropdown; } + @HostListener('focus') + handleFocus() { + if ((this.target).combo) { + this.target.focusedItem = this.target.getFirstSelectableItem(); + this.target.focusedItem.isFocused = true; + } + } /** * @hidden @@ -52,7 +59,7 @@ export class IgxDropDownItemNavigationDirective { if (event) { const key = event.key.toLowerCase(); if (!this.target.collapsed) { // If dropdown is opened - const navKeys = ['esc', 'escape', 'enter', 'tab', 'space', 'spacebar', ' ', + const navKeys = ['esc', 'escape', 'enter', 'space', 'spacebar', ' ', 'arrowup', 'up', 'arrowdown', 'down', 'home', 'end']; if (navKeys.indexOf(key) === -1) { // If key has appropriate function in DD return; @@ -65,10 +72,10 @@ export class IgxDropDownItemNavigationDirective { switch (key) { case 'esc': case 'escape': + // case 'tab': this.onEscapeKeyDown(event); break; case 'enter': - case 'tab': this.onEnterKeyDown(event); break; case 'space':