Merge pull request #15869 from IgniteUI/mkirkova/feat-combo-close-on-blur-15838

Close dropdown on 'Tab' key on the drop down item

Author: kacheshmarova

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();
         }
     }

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

@@ -1943,6 +1943,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 () => {

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;
             }

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:
         }
     }
 

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];
 

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

@@ -1196,6 +1196,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]);