[ch-combo-box-render] Add support to open and select/close the ch-combo-box-render with the NumpadEnter key (#548)

This key works the same way as the Enter key

Author: ncamera

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

@@ -71,13 +71,15 @@ type KeyDownNoFiltersEvents =
   | typeof KEY_CODES.HOME
   | typeof KEY_CODES.END
   | typeof KEY_CODES.ENTER
+  | typeof KEY_CODES.NUMPAD_ENTER
   | typeof KEY_CODES.SPACE
   | typeof KEY_CODES.TAB;
 
 type KeyDownWithFiltersEvents =
   | typeof KEY_CODES.ARROW_UP
   | typeof KEY_CODES.ARROW_DOWN
   | typeof KEY_CODES.ENTER
+  | typeof KEY_CODES.NUMPAD_ENTER
   | typeof KEY_CODES.TAB;
 
 /**
@@ -231,6 +233,16 @@ export class ChComboBoxRender
       this.expanded = !this.expanded;
     },
 
+    // Same as the Enter handler
+    NumpadEnter: () => {
+      // The focus must return to the Host when closing the popover
+      if (this.expanded) {
+        this.#shouldFocusTheComboBox = true;
+      }
+
+      this.expanded = !this.expanded;
+    },
+
     Space: event => {
       event.preventDefault(); // Stop space key from scrolling
 
@@ -273,6 +285,10 @@ export class ChComboBoxRender
     Enter: (event: KeyboardEvent) =>
       this.#checkAndEmitValueChangeWithFilters(event),
 
+    // Same as the Enter handler
+    NumpadEnter: (event: KeyboardEvent) =>
+      this.#checkAndEmitValueChangeWithFilters(event),
+
     Tab: (event: KeyboardEvent) =>
       this.#checkAndEmitValueChangeWithFilters(event)
   };

src/components/combo-box/tests/keyboard-selection-filters.e2e.ts

@@ -392,8 +392,7 @@ const keysToConfirmClose: ConfirmKeys[] = [
   "Enter",
   // "Escape",
 
-  // TODO: Fix this test
-  // "NumpadEnter",
+  "NumpadEnter",
 
   "Tab",
   "LeftMouseClick"

src/components/combo-box/tests/keyboard-selection.e2e.ts

@@ -453,8 +453,7 @@ const keysToConfirmClose: ConfirmKeys[] = [
   // TODO: Fix this test
   // "Escape",
 
-  // TODO: Fix this test
-  // "NumpadEnter",
+  "NumpadEnter",
 
   "Tab",
   "LeftMouseClick"

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

@@ -43,18 +43,14 @@ const SUGGEST_KEYS_TO_NOT_OPEN: KeyToPress[] = [
   "Tab"
 ];
 
-const COMBO_BOX_KEYS_TO_OPEN: KeyToPress[] = [
-  "Space",
-  "Enter"
-  // "NumpadEnter"
-];
+const COMBO_BOX_KEYS_TO_OPEN: KeyToPress[] = ["Space", "Enter", "NumpadEnter"];
 const SUGGEST_KEYS_TO_OPEN: KeyToPress[] = [
   // TODO: Fix $0.focus() to fix these tests
   // "ArrowDown",
   // "ArrowUp",
   "Space",
-  "Enter"
-  // "NumpadEnter"
+  "Enter",
+  "NumpadEnter"
 ];
 
 const COMBO_BOX_KEYS_TO_NOT_CLOSE: KeyToPress[] = [
@@ -69,16 +65,16 @@ const COMBO_BOX_KEYS_TO_NOT_CLOSE: KeyToPress[] = [
 const COMBO_BOX_KEYS_TO_CLOSE: KeyToPress[] = [
   "Enter",
   "Escape",
-  // "NumpadEnter",
+  "NumpadEnter",
   "Tab"
 ];
 
 const COMBO_BOX_KEYS_TO_CLOSE_AND_RETURN_FOCUS: KeyToPress[] = [
   // TODO: Fix these tests
   "Enter",
   "Escape",
-  "Tab"
-  // "NumpadEnter"
+  "Tab",
+  "NumpadEnter"
 ];
 
 const STRICT_FILTERS: ComboBoxSuggestOptions = { strict: true };