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,11 +46,29 @@ 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 (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.physicalKeyboardHighlightPress) {
+            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) {
@@ -62,6 +80,7 @@ class PhysicalKeyboard {
             }
           }
         }
+      }
     });
   }
 
@@ -74,12 +93,28 @@ class PhysicalKeyboard {
         instance.getButtonElement(buttonPressed) ||
         instance.getButtonElement(`{${buttonPressed}}`);
 
-      if (buttonDOM && buttonDOM.removeAttribute) {
+      const applyButtonStyle = (buttonElement: HTMLElement) => {
-        buttonDOM.removeAttribute("style");
+        if(buttonElement.removeAttribute){
+          buttonElement.removeAttribute("style");
+        }
+      };
+
+      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();
           }
         }
+      }
     });
   }