[ch-combo-box-render] Fix for focus not returning to the ch-combo-box-render when closing it with the Escape, Enter, or Tab keys (#547)

Author: ncamera

src/components/combo-box/combo-box.tsx

@@ -118,6 +118,8 @@ export class ChComboBoxRender
   #captionToItemInfo: Map<string, ComboBoxItemModelExtended> = new Map();
   #itemImages: Map<string, ComboBoxItemImagesModel> | undefined;
 
+  #shouldFocusTheComboBox = false;
+
   // Filters info
   #applyFilters = false;
   #queuedInputValueUpdate: NodeJS.Timeout;
@@ -223,7 +225,7 @@ export class ChComboBoxRender
     Enter: () => {
       // The focus must return to the Host when closing the popover
       if (this.expanded) {
-        this.el.focus();
+        this.#shouldFocusTheComboBox = true;
       }
 
       this.expanded = !this.expanded;
@@ -242,7 +244,7 @@ export class ChComboBoxRender
       if (this.expanded) {
         event.preventDefault();
 
-        this.el.focus();
+        this.#shouldFocusTheComboBox = true;
         this.expanded = false;
       }
     }
@@ -562,7 +564,7 @@ export class ChComboBoxRender
 
     // The focus must return to the Host when tabbing with the popover
     // expanded
-    this.el.focus();
+    this.#shouldFocusTheComboBox = true;
     event.preventDefault();
 
     // "Traditional selection". A value was selected pressing the enter key
@@ -666,7 +668,7 @@ export class ChComboBoxRender
     // Return the focus to the control if the popover was closed with the
     // escape key or by clicking again the combo-box
     if (focusComposedPath().includes(this.el)) {
-      this.el.focus();
+      this.#shouldFocusTheComboBox = true;
     }
 
     if (this.suggest) {
@@ -866,6 +868,11 @@ export class ChComboBoxRender
         });
       }
     }
+
+    if (this.#shouldFocusTheComboBox) {
+      this.#shouldFocusTheComboBox = false;
+      this.el.focus();
+    }
   }
 
   render() {

src/components/combo-box/tests/opening.e2e.ts

@@ -75,9 +75,10 @@ const COMBO_BOX_KEYS_TO_CLOSE: KeyToPress[] = [
 
 const COMBO_BOX_KEYS_TO_CLOSE_AND_RETURN_FOCUS: KeyToPress[] = [
   // TODO: Fix these tests
-  // "Enter",
-  // "Escape"
-  // "NumpadEnter",
+  "Enter",
+  "Escape",
+  "Tab"
+  // "NumpadEnter"
 ];
 
 const STRICT_FILTERS: ComboBoxSuggestOptions = { strict: true };
@@ -87,7 +88,8 @@ const testOpeningClosing = (suggest: boolean, strict?: true) => {
     suggest ? "suggest" : "combo-box"
   }]${strict ? "[strict]" : ""}`;
 
-  const focusableElementTagName = suggest ? "input" : "div";
+  // TODO: Fix this. The focusable element should not change
+  //  const focusableElementTagName = suggest ? "input" : "div";
 
   describe(testDescription, () => {
     let page: E2EPage;
@@ -103,8 +105,6 @@ const testOpeningClosing = (suggest: boolean, strict?: true) => {
 
     // TODO: Add Mouse click in the test
     const keysToClose: KeyToPress[] = COMBO_BOX_KEYS_TO_CLOSE;
-    const keysToCloseAndReturnFocus: KeyToPress[] =
-      COMBO_BOX_KEYS_TO_CLOSE_AND_RETURN_FOCUS;
 
     const checkPopoverDefined = async (shouldBeDefined: boolean) => {
       const popoverRef = await page.find("ch-combo-box-render >>> ch-popover");
@@ -204,23 +204,21 @@ const testOpeningClosing = (suggest: boolean, strict?: true) => {
       });
     });
 
-    keysToCloseAndReturnFocus.forEach(key => {
+    COMBO_BOX_KEYS_TO_CLOSE_AND_RETURN_FOCUS.forEach(key => {
       it(`should close the popover when pressing KEY = "${key}" and return the focus to the combo-box`, async () => {
         await page.click("ch-combo-box-render");
         await page.waitForChanges();
         await pressKey(key);
         await checkPopoverDefined(false);
 
         const focusedElementTagName = await page.evaluate(() =>
-          document
-            .querySelector("ch-combo-box-render")
-            .shadowRoot.activeElement?.tagName.toLowerCase()
+          document.activeElement.tagName.toLowerCase()
         );
-        expect(focusedElementTagName).toBe(focusableElementTagName);
+        expect(focusedElementTagName).toBe("ch-combo-box-render");
       });
     });
 
-    keysToCloseAndReturnFocus.forEach(key => {
+    COMBO_BOX_KEYS_TO_CLOSE_AND_RETURN_FOCUS.forEach(key => {
       it(`should close the popover when pressing KEY = "${key}" and return the focus to the combo-box even if the selection is updated`, async () => {
         await page.click("ch-combo-box-render");
         await page.waitForChanges();
@@ -229,11 +227,9 @@ const testOpeningClosing = (suggest: boolean, strict?: true) => {
         await checkPopoverDefined(false);
 
         const focusedElementTagName = await page.evaluate(() =>
-          document
-            .querySelector("ch-combo-box-render")
-            .shadowRoot.activeElement?.tagName.toLowerCase()
+          document.activeElement.tagName.toLowerCase()
         );
-        expect(focusedElementTagName).toBe(focusableElementTagName);
+        expect(focusedElementTagName).toBe("ch-combo-box-render");
       });
     });