feat(combo): update Escape key behavior

Author: MonikaKirkova

src/components/combo/combo.spec.ts

@@ -7,8 +7,10 @@ import {
   arrowUp,
   endKey,
   enterKey,
+  escapeKey,
   homeKey,
   spaceBar,
+  tabKey,
 } from '../common/controllers/key-bindings.js';
 import { defineComponents } from '../common/definitions/defineComponents.js';
 import { first } from '../common/util.js';
@@ -716,6 +718,48 @@ 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;
+
+      simulateKeyboard(options, tabKey, 1);
+      await elementUpdated(combo);
+      expect(combo.open).to.be.false;
+
+      await combo.show();
+      simulateKeyboard(searchInput, tabKey, 1);
+      await elementUpdated(combo);
+
+      expect(combo.open).to.be.false;
+
+      await combo.show();
+      simulateKeyboard(input, tabKey, 1);
+      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;
+
+      simulateKeyboard(options, escapeKey, 1);
+      await elementUpdated(combo);
+
+      expect(combo.open).to.be.false;
+      expect(combo.value.length).to.equal(2);
+
+      simulateKeyboard(input, escapeKey, 1);
+      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);
@@ -750,6 +794,43 @@ describe('Combo', () => {
       expect(combo.open).to.be.false;
     });
 
+    it('should close the menu by pressing the Tab key in single selection', async () => {
+      await combo.show();
+      await list.layoutComplete;
+
+      simulateKeyboard(options, tabKey, 1);
+      await elementUpdated(combo);
+
+      expect(combo.open).to.be.false;
+
+      await combo.show();
+      simulateKeyboard(input, tabKey, 1);
+      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;
+
+      simulateKeyboard(options, escapeKey, 1);
+      await elementUpdated(combo);
+
+      expect(combo.open).to.be.false;
+      expect(combo.value.length).to.equal(1);
+
+      simulateKeyboard(input, escapeKey, 1);
+      await elementUpdated(combo);
+
+      expect(combo.open).to.be.false;
+      expect(combo.value.length).to.equal(0);
+    });
+
     it('should support a single selection variant', async () => {
       combo.singleSelect = true;
       await elementUpdated(combo);

src/components/combo/combo.ts

@@ -799,6 +799,17 @@ export default class IgcComboComponent<
     this.updateValue();
   }
 
+  /** @hidden @internal */
+  public clearSelection() {
+    if (this.singleSelect) {
+      this.resetSearchTerm();
+      this.clearSingleSelection();
+    } else {
+      this._selection.deselect([], true);
+    }
+    this.updateValue();
+  }
+
   protected clearSingleSelection() {
     const _selection = this._selection.asArray;
     const selection = first(_selection);
@@ -812,15 +823,7 @@ export default class IgcComboComponent<
 
   protected handleClearIconClick(e: PointerEvent) {
     e.stopPropagation();
-
-    if (this.singleSelect) {
-      this.resetSearchTerm();
-      this.clearSingleSelection();
-    } else {
-      this._selection.deselect([], true);
-    }
-
-    this.updateValue();
+    this.clearSelection();
     this._navigation.active = -1;
   }
 

src/components/combo/controllers/navigation.ts

@@ -109,13 +109,19 @@ export class ComboNavigationController<T extends object> {
     }
   };
 
-  private _onTab = async (): Promise<void> => {
+  private _onTab = async (shiftKey?: boolean): Promise<void> => {
     if (this.combo.open) {
+      if (shiftKey) {
+        this.combo.focus();
+      }
       await this._hide();
     }
   };
 
   private _onEscape = async (): Promise<void> => {
+    if (!this.combo.open) {
+      this.combo.clearSelection();
+    }
     if (await this._hide()) {
       this.input.focus();
     }
@@ -207,8 +213,10 @@ export class ComboNavigationController<T extends object> {
 
     // Combo
     addKeybindings(this.combo, { skip, bindingDefaults })
-      .set(tabKey, this._onTab, { preventDefault: false })
-      .set([shiftKey, tabKey], this._onTab, { preventDefault: false })
+      .set(tabKey, () => this._onTab(), { preventDefault: false })
+      .set([shiftKey, tabKey], () => this._onTab(true), {
+        preventDefault: false,
+      })
       .set(escapeKey, this._onEscape);
 
     // Main input