From ed2c5ce81d7149b07cb3b11f4b629a63034be8ce Mon Sep 17 00:00:00 2001
From: Francisco Hodge <hello@franciscohodge.com>
Date: Fri, 30 Jul 2021 22:23:51 -0700
Subject: [PATCH] Ensure button handler is triggered on
 physicalKeyboardHighlightPress. Per
 https://github.com/hodgef/react-simple-keyboard/issues/1386

---
 src/lib/interfaces.ts                |  9 ++++++++-
 src/lib/services/PhysicalKeyboard.ts | 25 +++++++++++++++++++++----
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/lib/interfaces.ts b/src/lib/interfaces.ts
index 0e559cde..43d8b719 100644
--- a/src/lib/interfaces.ts
+++ b/src/lib/interfaces.ts
@@ -136,10 +136,17 @@ export interface KeyboardOptions {
     physicalKeyboardHighlight?: boolean;
 
     /**
-     * Presses keys highlighted by physicalKeyboardHighlight
+     * Calls handler for a button highlighted by physicalKeyboardHighlight
+     * In other words, this calls keyboard.handleButtonClicked(buttonName) on the highlighted button
      */
     physicalKeyboardHighlightPress?: boolean;
 
+    /**
+     * Trigger click on a button's element when using physicalKeyboardHighlightPress
+     * In other words, this calls button.click() on the highlighted button
+     */
+    physicalKeyboardHighlightPressUseClick?: boolean;
+
     /**
      * Define the text color that the physical keyboard highlighted key should have.
      */
diff --git a/src/lib/services/PhysicalKeyboard.ts b/src/lib/services/PhysicalKeyboard.ts
index 4bf16012..27612b7d 100644
--- a/src/lib/services/PhysicalKeyboard.ts
+++ b/src/lib/services/PhysicalKeyboard.ts
@@ -29,9 +29,22 @@ class PhysicalKeyboard {
     const buttonPressed = this.getSimpleKeyboardLayoutKey(event);
 
     this.dispatch((instance: any) => {
-      const buttonDOM =
-        instance.getButtonElement(buttonPressed) ||
-        instance.getButtonElement(`{${buttonPressed}}`);
+      const standardButtonPressed = instance.getButtonElement(buttonPressed);
+      const functionButtonPressed = instance.getButtonElement(
+        `{${buttonPressed}}`
+      );
+      let buttonDOM;
+      let buttonName;
+
+      if (standardButtonPressed) {
+        buttonDOM = standardButtonPressed;
+        buttonName = buttonPressed;
+      } else if (functionButtonPressed) {
+        buttonDOM = functionButtonPressed;
+        buttonName = `{${buttonPressed}}`;
+      } else {
+        return;
+      }
 
       if (buttonDOM) {
         buttonDOM.style.backgroundColor =
@@ -40,7 +53,11 @@ class PhysicalKeyboard {
           options.physicalKeyboardHighlightTextColor || "black";
 
         if (options.physicalKeyboardHighlightPress) {
-          buttonDOM.click();
+          if (options.physicalKeyboardHighlightPressUseClick) {
+            buttonDOM.click();
+          } else {
+            instance.handleButtonClicked(buttonName, event);
+          }
         }
       }
     });