Return button in onKeyReleased method. Tests updated. Fixes #145

build/css/index.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   simple-keyboard v2.24.0
+ *   simple-keyboard v2.24.1
  *   https://github.com/hodgef/simple-keyboard
  * 
  *   Copyright (c) Francisco Hodge (https://github.com/hodgef)

build/css/simple-keyboard.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   simple-keyboard v2.24.0 (Non-minified build)
+ *   simple-keyboard v2.24.1 (Non-minified build)
  *   https://github.com/hodgef/simple-keyboard
  * 
  *   Copyright (c) Francisco Hodge (https://github.com/hodgef)

build/index.d.ts

@@ -133,6 +133,11 @@ declare module 'simple-keyboard' {
      */
     onKeyPress?: (button: string) => any;
 
+    /**
+     * Executes the callback function on key release.
+     */
+    onKeyReleased?: (button: string) => any;
+
     /**
      * Executes the callback function on input change. Returns the current input's string.
      */
@@ -162,11 +167,6 @@ declare module 'simple-keyboard' {
      * Executes the callback function on input change. Returns the input object with all defined inputs.
      */
     onChangeAll?: (inputs: any) => any;
-
-    /**
-     * Executes the callback function on key release.
-     */
-    onKeyReleased?: () => void;
   }
 
   class Keyboard {

build/simple-keyboard.js

@@ -1,6 +1,6 @@
 /*!
  * 
- *   simple-keyboard v2.24.0 (Non-minified build)
+ *   simple-keyboard v2.24.1 (Non-minified build)
  *   https://github.com/hodgef/simple-keyboard
  * 
  *   Copyright (c) Francisco Hodge (https://github.com/hodgef)
@@ -995,15 +995,15 @@
    * Handles button mouseup
    */      }, {
         key: "handleButtonMouseUp",
-        value: function handleButtonMouseUp() {
+        value: function handleButtonMouseUp(button) {
           this.isMouseHold = false;
           if (this.holdInteractionTimeout) {
             clearTimeout(this.holdInteractionTimeout);
             /**
      * Calling onKeyReleased
      */          }
-          if (typeof this.options.onKeyReleased === "function") {
+          if (button && typeof this.options.onKeyReleased === "function") {
-            this.options.onKeyReleased();
+            this.options.onKeyReleased(button);
           }
         }
         /**
@@ -1328,7 +1328,7 @@
           this.caretEventHandler(event);
         }
         /**
-   * Called by {@link caretEventHandler} when an event that warrants a cursor position update is triggered
+   * Called by {@link setEventListeners} when an event that warrants a cursor position update is triggered
    */      }, {
         key: "caretEventHandler",
         value: function caretEventHandler(event) {
@@ -1684,11 +1684,11 @@
                   _this10.handleButtonClicked(button);
                   _this10.handleButtonMouseDown(button, e);
                 };
-                buttonDOM.onpointerup = function(e) {
+                buttonDOM.onpointerup = function() {
-                  _this10.handleButtonMouseUp();
+                  return _this10.handleButtonMouseUp(button);
                 };
-                buttonDOM.onpointercancel = function(e) {
+                buttonDOM.onpointercancel = function() {
-                  return _this10.handleButtonMouseUp();
+                  return _this10.handleButtonMouseUp(button);
                 };
               } else {
                 /**
@@ -1700,11 +1700,11 @@
                     _this10.handleButtonClicked(button);
                     _this10.handleButtonMouseDown(button, e);
                   };
-                  buttonDOM.ontouchend = function(e) {
+                  buttonDOM.ontouchend = function() {
-                    return _this10.handleButtonMouseUp();
+                    return _this10.handleButtonMouseUp(button);
                   };
-                  buttonDOM.ontouchcancel = function(e) {
+                  buttonDOM.ontouchcancel = function() {
-                    return _this10.handleButtonMouseUp();
+                    return _this10.handleButtonMouseUp(button);
                   };
                 } else {
                   /**
@@ -1714,7 +1714,10 @@
                     _this10.handleButtonClicked(button);
                   };
                   buttonDOM.onmousedown = function(e) {
-                    _this10.handleButtonMouseDown(button, e);
+                    return _this10.handleButtonMouseDown(button, e);
+                  };
+                  buttonDOM.onmouseup = function() {
+                    return _this10.handleButtonMouseUp(button);
                   };
                 }
               }
@@ -1767,10 +1770,10 @@
             } else if (useTouchEvents) {
               /**
          * Handling ontouchend, ontouchcancel
-         */ document.ontouchend = function(e) {
+         */ document.ontouchend = function() {
                 return _this10.handleButtonMouseUp();
               };
-              document.ontouchcancel = function(e) {
+              document.ontouchcancel = function() {
                 return _this10.handleButtonMouseUp();
               };
             } else if (!useTouchEvents) {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-keyboard",
-  "version": "2.24.0",
+  "version": "2.24.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-keyboard",
-  "version": "2.24.0",
+  "version": "2.24.1",
   "description": "On-screen Javascript Virtual Keyboard",
   "main": "build/index.js",
   "types": "build/index.d.ts",

src/lib/@types/index.d.ts

@@ -133,6 +133,11 @@ declare module 'simple-keyboard' {
      */
     onKeyPress?: (button: string) => any;
 
+    /**
+     * Executes the callback function on key release.
+     */
+    onKeyReleased?: (button: string) => any;
+
     /**
      * Executes the callback function on input change. Returns the current input's string.
      */
@@ -162,11 +167,6 @@ declare module 'simple-keyboard' {
      * Executes the callback function on input change. Returns the input object with all defined inputs.
      */
     onChangeAll?: (inputs: any) => any;
-
-    /**
-     * Executes the callback function on key release.
-     */
-    onKeyReleased?: () => void;
   }
 
   class Keyboard {

src/lib/components/Keyboard.js

@@ -295,15 +295,15 @@ class SimpleKeyboard {
   /**
    * Handles button mouseup
    */
-  handleButtonMouseUp() {
+  handleButtonMouseUp(button) {
     this.isMouseHold = false;
     if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout);
 
     /**
      * Calling onKeyReleased
      */
-    if (typeof this.options.onKeyReleased === "function")
+    if (button && typeof this.options.onKeyReleased === "function")
-      this.options.onKeyReleased();
+      this.options.onKeyReleased(button);
   }
 
   /**
@@ -672,7 +672,7 @@ class SimpleKeyboard {
   }
 
   /**
-   * Called by {@link caretEventHandler} when an event that warrants a cursor position update is triggered
+   * Called by {@link setEventListeners} when an event that warrants a cursor position update is triggered
    */
   caretEventHandler(event) {
     let targetTagName;
@@ -1164,10 +1164,8 @@ class SimpleKeyboard {
             this.handleButtonClicked(button);
             this.handleButtonMouseDown(button, e);
           };
-          buttonDOM.onpointerup = e => {
+          buttonDOM.onpointerup = () => this.handleButtonMouseUp(button);
-            this.handleButtonMouseUp();
+          buttonDOM.onpointercancel = () => this.handleButtonMouseUp(button);
-          };
-          buttonDOM.onpointercancel = e => this.handleButtonMouseUp();
         } else {
           /**
            * Fallback for browsers not supporting PointerEvents
@@ -1180,8 +1178,8 @@ class SimpleKeyboard {
               this.handleButtonClicked(button);
               this.handleButtonMouseDown(button, e);
             };
-            buttonDOM.ontouchend = e => this.handleButtonMouseUp();
+            buttonDOM.ontouchend = () => this.handleButtonMouseUp(button);
-            buttonDOM.ontouchcancel = e => this.handleButtonMouseUp();
+            buttonDOM.ontouchcancel = () => this.handleButtonMouseUp(button);
           } else {
             /**
              * Handle mouse events
@@ -1190,9 +1188,8 @@ class SimpleKeyboard {
               this.isMouseHold = false;
               this.handleButtonClicked(button);
             };
-            buttonDOM.onmousedown = e => {
+            buttonDOM.onmousedown = e => this.handleButtonMouseDown(button, e);
-              this.handleButtonMouseDown(button, e);
+            buttonDOM.onmouseup = () => this.handleButtonMouseUp(button);
-            };
           }
         }
 
@@ -1274,8 +1271,8 @@ class SimpleKeyboard {
         /**
          * Handling ontouchend, ontouchcancel
          */
-        document.ontouchend = e => this.handleButtonMouseUp();
+        document.ontouchend = () => this.handleButtonMouseUp();
-        document.ontouchcancel = e => this.handleButtonMouseUp();
+        document.ontouchcancel = () => this.handleButtonMouseUp();
       } else if (!useTouchEvents) {
         /**
          * Handling mouseup

src/lib/components/tests/Keyboard.test.js

@@ -1281,10 +1281,12 @@ it('Keyboard onKeyReleased will work', () => {
 
   let pressed = false;
   let firedTimes = 0;
+  let buttonPressed;
 
   let keyboard = new Keyboard({
-    onKeyReleased: () => {
+    onKeyReleased: button => {
       pressed = true;
+      buttonPressed = button;
       firedTimes++;
     },
     debug: true
@@ -1295,4 +1297,5 @@ it('Keyboard onKeyReleased will work', () => {
 
   expect(pressed).toBeTruthy();
   expect(firedTimes).toBe(1);
+  expect(buttonPressed).toBe("q");
 });