Handle multiple buttons when using physicalKeyboardHighlight. Fixes https://github.com/hodgef/react-simple-keyboard/issues/2211

src/lib/services/PhysicalKeyboard.ts

@@ -34,7 +34,7 @@ class PhysicalKeyboard {
         `{${buttonPressed}}`
       );
       let buttonDOM;
-      let buttonName;
+      let buttonName: string;
 
       if (standardButtonPressed) {
         buttonDOM = standardButtonPressed;
@@ -46,19 +46,38 @@ class PhysicalKeyboard {
         return;
       }
 
-      if (buttonDOM) {
+      const applyButtonStyle = (buttonElement: HTMLElement) => {
-        buttonDOM.style.background =
+        buttonElement.style.background =
           options.physicalKeyboardHighlightBgColor || "#dadce4";
-        buttonDOM.style.color =
+          buttonElement.style.color =
           options.physicalKeyboardHighlightTextColor || "black";
+      }
 
-        if (options.physicalKeyboardHighlightPress) {
+      if (buttonDOM) {
-          if (options.physicalKeyboardHighlightPressUsePointerEvents) {
+        if(Array.isArray(buttonDOM)){
-            buttonDOM.onpointerdown();
+          buttonDOM.forEach(buttonElement => applyButtonStyle(buttonElement));
-          } else if (options.physicalKeyboardHighlightPressUseClick) {
+
-            buttonDOM.click();
+          // Even though we have an array of buttons, we just want to press one of them
-          } else {
+          if (options.physicalKeyboardHighlightPress) {
-            instance.handleButtonClicked(buttonName, event);
+            if (options.physicalKeyboardHighlightPressUsePointerEvents) {
+              buttonDOM[0]?.onpointerdown();
+            } else if (options.physicalKeyboardHighlightPressUseClick) {
+              buttonDOM[0]?.click();
+            } else {
+              instance.handleButtonClicked(buttonName, event);
+            }
+          }
+        } else {
+          applyButtonStyle(buttonDOM);
+
+          if (options.physicalKeyboardHighlightPress) {
+            if (options.physicalKeyboardHighlightPressUsePointerEvents) {
+              buttonDOM.onpointerdown();
+            } else if (options.physicalKeyboardHighlightPressUseClick) {
+              buttonDOM.click();
+            } else {
+              instance.handleButtonClicked(buttonName, event);
+            }
           }
         }
       }
@@ -74,10 +93,26 @@ class PhysicalKeyboard {
         instance.getButtonElement(buttonPressed) ||
         instance.getButtonElement(`{${buttonPressed}}`);
 
-      if (buttonDOM && buttonDOM.removeAttribute) {
+      const applyButtonStyle = (buttonElement: HTMLElement) => {
-        buttonDOM.removeAttribute("style");
+        if(buttonElement.removeAttribute){
-        if (options.physicalKeyboardHighlightPressUsePointerEvents) {
+          buttonElement.removeAttribute("style");
-          buttonDOM.onpointerup();
+        }
+      };
+
+      if (buttonDOM) {
+        if(Array.isArray(buttonDOM)){
+          buttonDOM.forEach(buttonElement => applyButtonStyle(buttonElement));
+
+          // Even though we have an array of buttons, we just want to press one of them
+          if (options.physicalKeyboardHighlightPressUsePointerEvents) {
+            buttonDOM[0]?.onpointerup();
+          }
+        } else {
+          applyButtonStyle(buttonDOM);
+
+          if (options.physicalKeyboardHighlightPressUsePointerEvents) {
+            buttonDOM.onpointerup();
+          }
         }
       }
     });