feat(combo): update Tab and Escape key behavior

Author: MonikaKirkova

src/components/combo/combo.spec.ts

@@ -714,6 +714,85 @@ describe('Combo', () => {
       expect(combo.open).to.be.true;
     });
 
+    it('should close the menu by pressing the Tab key', async () => {
+      await combo.show();
+      await list.layoutComplete;
+
+      pressKey(options, 'Tab', 1, { altKey: false });
+      await elementUpdated(combo);
+      expect(combo.open).to.be.false;
+
+      await combo.show();
+      pressKey(searchInput, 'Tab', 1, { altKey: false });
+      await elementUpdated(combo);
+
+      expect(combo.open).to.be.false;
+
+      await combo.show();
+      pressKey(input, 'Tab', 1, { altKey: false });
+      await elementUpdated(combo);
+
+      expect(combo.open).to.be.false;
+    });
+
+    it('should clear the selection by pressing the Escape key when the combo is closed', async () => {
+      combo.autofocusList = true;
+      combo.select(['BG01', 'BG02']);
+      await elementUpdated(combo);
+
+      await combo.show();
+      await list.layoutComplete;
+
+      pressKey(options, 'Escape', 1, { altKey: false });
+      await elementUpdated(combo);
+
+      expect(combo.open).to.be.false;
+      expect(combo.value.length).to.equal(2);
+
+      pressKey(input, 'Escape', 1, { altKey: false });
+      await elementUpdated(combo);
+
+      expect(combo.open).to.be.false;
+      expect(combo.value.length).to.equal(0);
+    });
+
+    it('should close the menu by pressing the Tab key in single selection', async () => {
+      await combo.show();
+      await list.layoutComplete;
+
+      pressKey(options, 'Tab', 1, { altKey: false });
+      await elementUpdated(combo);
+
+      expect(combo.open).to.be.false;
+
+      await combo.show();
+      pressKey(input, 'Tab', 1, { altKey: false });
+      await elementUpdated(combo);
+
+      expect(combo.open).to.be.false;
+    });
+
+    it('should clear the selection by pressing the Escape key in single selection', async () => {
+      combo.singleSelect = true;
+      combo.select('BG01');
+      await elementUpdated(combo);
+
+      await combo.show();
+      await list.layoutComplete;
+
+      pressKey(options, 'Escape', 1, { altKey: false });
+      await elementUpdated(combo);
+
+      expect(combo.open).to.be.false;
+      expect(combo.value.length).to.equal(1);
+
+      pressKey(input, 'Escape', 1, { altKey: false });
+      await elementUpdated(combo);
+
+      expect(combo.open).to.be.false;
+      expect(combo.value.length).to.equal(0);
+    });
+
     it('should select the active item and close the menu by pressing Enter in single selection', async () => {
       combo.singleSelect = true;
       await elementUpdated(combo);

src/components/combo/combo.ts

@@ -701,6 +701,7 @@ export default class IgcComboComponent<
       this.emitEvent('igcClosed');
     }
     this._navigation.active = -1;
+    this._input.focus();
     return true;
   }
 
@@ -841,6 +842,15 @@ export default class IgcComboComponent<
 
   protected handleMainInputKeydown(e: KeyboardEvent) {
     this._setTouchedState();
+    if (e.key === 'Escape' && !this.open) {
+      if (this.singleSelect) {
+        this.resetSearchTerm();
+        this.clearSingleSelection();
+      } else {
+        this._selection.deselect([], true);
+      }
+      this.updateValue();
+    }
     this._navigation.navigateMainInput(e, this._list);
   }
 

src/components/combo/controllers/navigation.ts

@@ -35,7 +35,7 @@ export class NavigationController<T extends object>
       Escape: this.escape,
       ArrowUp: this.escape,
       ArrowDown: this.inputArrowDown,
-      Tab: this.inputArrowDown,
+      Tab: this.tab,
     })
   );
 
@@ -252,7 +252,9 @@ export class NavigationController<T extends object>
     event.stopPropagation();
 
     if (this.mainInputHandlers.has(event.key)) {
-      event.preventDefault();
+      if (event.key.toLowerCase() !== 'tab') {
+        event.preventDefault();
+      }
       this.mainInputHandlers.get(event.key)!.call(this, container);
     }
   }
@@ -264,7 +266,9 @@ export class NavigationController<T extends object>
     event.stopPropagation();
 
     if (this.searchInputHandlers.has(event.key)) {
-      event.preventDefault();
+      if (event.key.toLowerCase() !== 'tab') {
+        event.preventDefault();
+      }
       this.searchInputHandlers.get(event.key)!.call(this, container);
     }
   }
@@ -273,7 +277,9 @@ export class NavigationController<T extends object>
     event.stopPropagation();
 
     if (this.listHandlers.has(event.key)) {
-      event.preventDefault();
+      if (event.key.toLowerCase() !== 'tab') {
+        event.preventDefault();
+      }
       this.listHandlers.get(event.key)!.call(this, container);
     }
   }