diff --git a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts index 733995846f3..98ff2c796d4 100644 --- a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts @@ -178,6 +178,7 @@ export class IgxComboDropDownComponent extends IgxDropDownComponent implements I this.handleSpace(); break; case DropDownActionKey.ESCAPE: + case DropDownActionKey.TAB: this.close(); } } 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 a3cfa04b310..8ea614d5007 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts @@ -1938,6 +1938,16 @@ describe('igxCombo', () => { fixture.detectChanges(); expect(firstVisibleItem.classList.contains(CSS_CLASS_FOCUSED)).toBeTruthy(); })); + it('should close the dropdown list on pressing Tab key', fakeAsync(() => { + combo.toggle(); + fixture.detectChanges(); + + const dropdownContent = fixture.debugElement.query(By.css(`.${CSS_CLASS_CONTENT}`)); + UIInteractions.triggerEventHandlerKeyDown('Tab', dropdownContent); + tick(); + fixture.detectChanges(); + expect(combo.collapsed).toBeTruthy(); + })); }); describe('primitive data dropdown: ', () => { it('should properly navigate with HOME/END keys when no virtScroll is necessary', async () => { diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down-navigation.directive.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down-navigation.directive.ts index 133e239e3a7..4c3df659eaa 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down-navigation.directive.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down-navigation.directive.ts @@ -62,7 +62,7 @@ export class IgxDropDownItemNavigationDirective implements IDropDownNavigationDi const key = event.key.toLowerCase(); if (!this.target.collapsed) { // If dropdown is opened const navKeys = ['esc', 'escape', 'enter', 'space', 'spacebar', ' ', - 'arrowup', 'up', 'arrowdown', 'down', 'home', 'end']; + 'arrowup', 'up', 'arrowdown', 'down', 'home', 'end', 'tab']; if (navKeys.indexOf(key) === -1) { // If key has appropriate function in DD return; } @@ -98,6 +98,9 @@ export class IgxDropDownItemNavigationDirective implements IDropDownNavigationDi case 'end': this.onEndKeyDown(); break; + case 'tab': + this.target.onItemActionKey(DropDownActionKey.TAB, event); + break; default: return; } 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 935c3b72f88..f4f7199ba8c 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 @@ -196,6 +196,7 @@ export abstract class IgxDropDownBaseDirective implements IDropDownList, OnInit this.selectItem(this.focusedItem, event); break; case DropDownActionKey.ESCAPE: + case DropDownActionKey.TAB: } } diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.common.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.common.ts index 6bbd72dbac1..4facc090c63 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.common.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.common.ts @@ -13,7 +13,8 @@ export enum Navigate { export const DropDownActionKey = /*@__PURE__*/mkenum({ ESCAPE: 'escape', ENTER: 'enter', - SPACE: 'space' + SPACE: 'space', + TAB: 'tab', }); export type DropDownActionKey = (typeof DropDownActionKey)[keyof typeof DropDownActionKey]; diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts index 1f3b0722636..fc09bc05051 100644 --- a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts +++ b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts @@ -1191,6 +1191,17 @@ describe('IgxSimpleCombo', () => { expect(combo.selection).toBeDefined() }); + it('should close the dropdown list on pressing Tab key', fakeAsync(() => { + combo.open(); + fixture.detectChanges(); + + const dropdownContent = fixture.debugElement.query(By.css(`.${CSS_CLASS_CONTENT}`)); + UIInteractions.triggerEventHandlerKeyDown('Tab', dropdownContent); + tick(); + fixture.detectChanges(); + expect(combo.collapsed).toBeTruthy(); + })); + it('should clear the selection on tab/blur if the search text does not match any value', () => { // allowCustomValues does not matter combo.select(combo.data[2][combo.valueKey]);