Add option clickOnMouseDown. Fixes hodgef/react-simple-keyboard#2936

hodgef · Nov 28, 2024 · b61f8e1 · b61f8e1
1 parent 38497b2
commit b61f8e1
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 11 deletions.
diff --git a/src/demo/BasicDemo.js b/src/demo/BasicDemo.js
@@ -16,8 +16,9 @@ class Demo {
      * Demo Start
      */
     this.keyboard = new Keyboard({
-      onChange: input => this.onChange(input),
-      onKeyPress: button => this.onKeyPress(button)
+      onChange: this.onChange,
+      onKeyPress: this.onKeyPress,
+      useMouseEvents: true
     });
 
     /**
@@ -28,21 +29,25 @@ class Demo {
     });
   }
 
-  onChange(input) {
+  onChange = (input) => {
     document.querySelector(".input").value = input;
     console.log("Input changed", input);
   }
 
-  onKeyPress(button) {
-    console.log("Button pressed", button);
+  onKeyPress = (button, e) => {
+    console.log("Button pressed", button, e);
 
     /**
      * If you want to handle the shift and caps lock buttons
      */
     if (button === "{shift}" || button === "{lock}") this.handleShift();
   }
 
-  handleShift() {
+  onKeyReleased = (button, e) => {
+    console.log("Button released", button, e);
+  }
+
+  handleShift = () => {
     const currentLayout = this.keyboard.options.layoutName;
     const shiftToggle = currentLayout === "default" ? "shift" : "default";
 

diff --git a/src/demo/index.js b/src/demo/index.js
@@ -3,18 +3,18 @@ import "./css/index.css";
 /**
  * Demos
  */
-//import BasicDemo from "./BasicDemo";
+import BasicDemo from "./BasicDemo";
 //import RTLDemo from "./RTLDemo";
 //import ButtonThemeDemo from "./ButtonThemeDemo";
 //import DOMElementDemo from "./DOMElementDemo";
 //import FullKeyboardDemo from "./FullKeyboardDemo";
 //import MultipleKeyboardsDemo from "./MultipleKeyboardsDestroyDemo";
-import CandidateBoxDemo from "./CandidateBoxDemo";
+//import CandidateBoxDemo from "./CandidateBoxDemo";
 
 /**
  * Selected demo
  */
-const SELECTED_DEMO = CandidateBoxDemo;
+const SELECTED_DEMO = BasicDemo;
 
 /**
  * Bootstrap

diff --git a/src/lib/components/Keyboard.ts b/src/lib/components/Keyboard.ts
@@ -138,6 +138,7 @@ class SimpleKeyboard {
      * @property {boolean} disableCandidateNormalization Disables the automatic normalization for selected layout candidates
      * @property {boolean} enableLayoutCandidatesKeyPress Enables onKeyPress triggering for layoutCandidate items
      * @property {boolean} updateCaretOnSelectionChange Updates caret when selectionchange event is fired
+     * @property {boolean} clickOnMouseDown When useMouseEvents is enabled, this option allows you to trigger a button click event on mousedown
      */
     this.options = {
       layoutName: "default",
@@ -1948,7 +1949,10 @@ class SimpleKeyboard {
                  * This fires handler before onKeyReleased, therefore when that option is set we will fire the handler
                  * in onmousedown instead
                  */
-                if (typeof this.options.onKeyReleased !== "function") {
+                if (
+                  typeof this.options.onKeyReleased !== "function" &&
+                  !(this.options.useMouseEvents && this.options.clickOnMouseDown)
+                ) {
                   this.handleButtonClicked(button, e);
                 }
               };
@@ -1957,7 +1961,10 @@ class SimpleKeyboard {
                  * Fire button handler for onKeyReleased use-case
                  */
                 if (
-                  typeof this.options.onKeyReleased === "function" &&
+                  (
+                    typeof this.options.onKeyReleased === "function" ||
+                    (this.options.useMouseEvents && this.options.clickOnMouseDown)
+                  ) &&
                   !this.isMouseHold
                 ) {
                   this.handleButtonClicked(button, e);

diff --git a/src/lib/interfaces.ts b/src/lib/interfaces.ts
@@ -270,6 +270,11 @@ export interface KeyboardOptions {
      */
     updateCaretOnSelectionChange?: boolean;
 
+    /**
+     * When useMouseEvents is enabled, this option allows you to trigger a button click event on mousedown
+     */
+    clickOnMouseDown?: boolean;
+
     /**
      * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
      */