Address physicalKeyboardHighlight issue on older browsers. Fixes #1035

build/types/services/PhysicalKeyboard.d.ts

@@ -15,6 +15,10 @@ declare class PhysicalKeyboard {
      * Transforms a KeyboardEvent's "key.code" string into a simple-keyboard layout format
      * @param  {object} event The KeyboardEvent
      */
-    getSimpleKeyboardLayoutKey(event: KeyboardEvent): string;
+    getSimpleKeyboardLayoutKey(event: KeyboardEvent): string | undefined;
+    /**
+     * Retrieve key from keyCode
+     */
+    keyCodeToKey(keyCode: number): string | undefined;
 }
 export default PhysicalKeyboard;

src/lib/services/PhysicalKeyboard.ts

@@ -40,22 +40,13 @@ class PhysicalKeyboard {
           options.physicalKeyboardHighlightTextColor || "black";
 
         if (options.physicalKeyboardHighlightPress) {
-          /**
+          buttonDOM.click();
-           * Trigger pointerdown
-           */
-          (
-            buttonDOM.onpointerdown ||
-            buttonDOM.onmousedown ||
-            buttonDOM.ontouchstart ||
-            Utilities.noop
-          )();
         }
       }
     });
   }
 
   handleHighlightKeyUp(event: KeyboardEvent) {
-    const options = this.getOptions();
     const buttonPressed = this.getSimpleKeyboardLayoutKey(event);
 
     this.dispatch((instance: any) => {
@@ -65,18 +56,6 @@ class PhysicalKeyboard {
 
       if (buttonDOM && buttonDOM.removeAttribute) {
         buttonDOM.removeAttribute("style");
-
-        if (options.physicalKeyboardHighlightPress) {
-          /**
-           * Trigger pointerup
-           */
-          (
-            buttonDOM.onpointerup ||
-            buttonDOM.onmouseup ||
-            buttonDOM.ontouchend ||
-            Utilities.noop
-          )();
-        }
       }
     });
   }
@@ -87,34 +66,128 @@ class PhysicalKeyboard {
    */
   getSimpleKeyboardLayoutKey(event: KeyboardEvent) {
     let output;
+    const keyId = event.code || event.key || this.keyCodeToKey(event?.keyCode);
 
     if (
-      event.code.includes("Numpad") ||
+      keyId?.includes("Numpad") ||
-      event.code.includes("Shift") ||
+      keyId?.includes("Shift") ||
-      event.code.includes("Space") ||
+      keyId?.includes("Space") ||
-      event.code.includes("Backspace") ||
+      keyId?.includes("Backspace") ||
-      event.code.includes("Control") ||
+      keyId?.includes("Control") ||
-      event.code.includes("Alt") ||
+      keyId?.includes("Alt") ||
-      event.code.includes("Meta")
+      keyId?.includes("Meta")
     ) {
       output = event.code;
     } else {
-      output = event.key;
+      output = event.key || this.keyCodeToKey(event?.keyCode);
+    }
+
+    return output?.toLowerCase();
   }
 
   /**
-     * Casting key to lowercase
+   * Retrieve key from keyCode
    */
-    if (
+  keyCodeToKey(keyCode: number) {
-      (output && output !== output.toUpperCase()) ||
+    return {
-      (event.code[0] === "F" &&
+      8: "Backspace",
-        Number.isInteger(Number(event.code[1])) &&
+      9: "Tab",
-        event.code.length <= 3)
+      13: "Enter",
-    ) {
+      16: "Shift",
-      output = output ? output.toLowerCase() : output;
+      17: "Ctrl",
-    }
+      18: "Alt",
-
+      19: "Pause",
-    return output;
+      20: "CapsLock",
+      27: "Esc",
+      32: "Space",
+      33: "PageUp",
+      34: "PageDown",
+      35: "End",
+      36: "Home",
+      37: "ArrowLeft",
+      38: "ArrowUp",
+      39: "ArrowRight",
+      40: "ArrowDown",
+      45: "Insert",
+      46: "Delete",
+      48: "0",
+      49: "1",
+      50: "2",
+      51: "3",
+      52: "4",
+      53: "5",
+      54: "6",
+      55: "7",
+      56: "8",
+      57: "9",
+      65: "A",
+      66: "B",
+      67: "C",
+      68: "D",
+      69: "E",
+      70: "F",
+      71: "G",
+      72: "H",
+      73: "I",
+      74: "J",
+      75: "K",
+      76: "L",
+      77: "M",
+      78: "N",
+      79: "O",
+      80: "P",
+      81: "Q",
+      82: "R",
+      83: "S",
+      84: "T",
+      85: "U",
+      86: "V",
+      87: "W",
+      88: "X",
+      89: "Y",
+      90: "Z",
+      91: "Meta",
+      96: "Numpad0",
+      97: "Numpad1",
+      98: "Numpad2",
+      99: "Numpad3",
+      100: "Numpad4",
+      101: "Numpad5",
+      102: "Numpad6",
+      103: "Numpad7",
+      104: "Numpad8",
+      105: "Numpad9",
+      106: "NumpadMultiply",
+      107: "NumpadAdd",
+      109: "NumpadSubtract",
+      110: "NumpadDecimal",
+      111: "NumpadDivide",
+      112: "F1",
+      113: "F2",
+      114: "F3",
+      115: "F4",
+      116: "F5",
+      117: "F6",
+      118: "F7",
+      119: "F8",
+      120: "F9",
+      121: "F10",
+      122: "F11",
+      123: "F12",
+      144: "NumLock",
+      145: "ScrollLock",
+      186: ";",
+      187: "=",
+      188: ",",
+      189: "-",
+      190: ".",
+      191: "/",
+      192: "`",
+      219: "[",
+      220: "\\",
+      221: "]",
+      222: "'",
+    }[keyCode];
   }
 }
 

src/lib/services/tests/PhysicalKeyboard.test.js

@@ -202,3 +202,24 @@ it('PhysicalKeyboard with physicalKeyboardHighlightPress can trigger noop', () =
     }
   }));
 });
+
+it('PhysicalKeyboard keyCodeToKey will work', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    physicalKeyboardHighlight: true
+  });
+
+  expect(keyboard.physicalKeyboard.keyCodeToKey(186)).toBe(";");
+
+  const methodTest = spyOn(keyboard.physicalKeyboard, "keyCodeToKey");
+
+  document.dispatchEvent(new KeyboardEvent('keyup', {
+    keyCode: 186,
+    target: {
+      tagName: "input"
+    }
+  }));
+
+  expect(methodTest).toBeCalledWith(186);
+});