Added preventMouseUpDefault, stopMouseUpPropagation. Fixes #700

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

@@ -91,12 +91,22 @@ declare module 'simple-keyboard' {
      * Calling preventDefault for the mousedown events keeps the focus on the input.
      */
     preventMouseDownDefault?: boolean;
+
+    /**
+     * Calling preventDefault for the mouseup events.
+     */
+    preventMouseUpDefault?: boolean;
     
     /**
      * Stops pointer down events on simple-keyboard buttons from bubbling to parent elements.
      */
     stopMouseDownPropagation?: boolean;
 
+    /**
+     * Stops pointer up events on simple-keyboard buttons from bubbling to parent elements.
+     */
+    stopMouseUpPropagation?: boolean;
+
     /**
      * Define the text color that the physical keyboard highlighted key should have.
      */

src/lib/components/Keyboard.js

@@ -65,7 +65,9 @@ class SimpleKeyboard {
      * @property {boolean} syncInstanceInputs When set to true, this option synchronizes the internal input of every simple-keyboard instance.
      * @property {boolean} physicalKeyboardHighlight Enable highlighting of keys pressed on physical keyboard.
      * @property {boolean} preventMouseDownDefault Calling preventDefault for the mousedown events keeps the focus on the input.
+     * @property {boolean} preventMouseUpDefault Calling preventDefault for the mouseup events.
      * @property {boolean} stopMouseDownPropagation Stops pointer down events on simple-keyboard buttons from bubbling to parent elements.
+     * @property {boolean} stopMouseUpPropagation Stops pointer up events on simple-keyboard buttons from bubbling to parent elements.
      * @property {string} physicalKeyboardHighlightTextColor Define the text color that the physical keyboard highlighted key should have.
      * @property {string} physicalKeyboardHighlightBgColor Define the background color that the physical keyboard highlighted key should have.
      * @property {function(button: string):string} onKeyPress Executes the callback function on key press. Returns button layout name (i.e.: “{shift}”).
@@ -379,7 +381,15 @@ class SimpleKeyboard {
   /**
    * Handles button mouseup
    */
-  handleButtonMouseUp(button) {
+  handleButtonMouseUp(button = null, e = null) {
+    if (e) {
+      /**
+       * Handle event options
+       */
+      if (this.options.preventMouseUpDefault) e.preventDefault();
+      if (this.options.stopMouseUpPropagation) e.stopPropagation();
+    }
+
     /**
      * Remove active class
      */
@@ -1396,11 +1406,11 @@ class SimpleKeyboard {
             this.handleButtonClicked(button);
             this.handleButtonMouseDown(button, e);
           };
-          buttonDOM.onpointerup = () => {
+          buttonDOM.onpointerup = e => {
-            this.handleButtonMouseUp(button);
+            this.handleButtonMouseUp(button, e);
           };
-          buttonDOM.onpointercancel = () => {
+          buttonDOM.onpointercancel = e => {
-            this.handleButtonMouseUp(button);
+            this.handleButtonMouseUp(button, e);
           };
         } else {
           /**
@@ -1414,11 +1424,11 @@ class SimpleKeyboard {
               this.handleButtonClicked(button);
               this.handleButtonMouseDown(button, e);
             };
-            buttonDOM.ontouchend = () => {
+            buttonDOM.ontouchend = e => {
-              this.handleButtonMouseUp(button);
+              this.handleButtonMouseUp(button, e);
             };
-            buttonDOM.ontouchcancel = () => {
+            buttonDOM.ontouchcancel = e => {
-              this.handleButtonMouseUp(button);
+              this.handleButtonMouseUp(button, e);
             };
           } else {
             /**
@@ -1431,8 +1441,8 @@ class SimpleKeyboard {
             buttonDOM.onmousedown = e => {
               this.handleButtonMouseDown(button, e);
             };
-            buttonDOM.onmouseup = () => {
+            buttonDOM.onmouseup = e => {
-              this.handleButtonMouseUp(button);
+              this.handleButtonMouseUp(button, e);
             };
           }
         }

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

@@ -929,14 +929,23 @@ it('Keyboard handleButtonMouseDown will work', () => {
 it('Keyboard handleButtonMouseDown will work with preventMouseDownDefault', () => {
   setDOM();
 
-  const keyboard = new Keyboard();
+  const keyboard = new Keyboard({
+    preventMouseDownDefault: true,
+    stopMouseDownPropagation: true
+  });
+  let called = false;
+  let called2 = false;
 
   keyboard.options.preventMouseDownDefault = true;
 
   keyboard.handleButtonMouseDown("q", {
     target: keyboard.getButtonElement("q"),
-    preventDefault: () => {},
+    preventDefault: () => {
-    stopPropagation: () => {}
+      called = true;
+    },
+    stopPropagation: () => {
+      called2 = true;
+    }
   });
 
   keyboard.getButtonElement("q").onclick();
@@ -944,6 +953,37 @@ it('Keyboard handleButtonMouseDown will work with preventMouseDownDefault', () =
     target: document.body
   });
 
+  expect(called).toBe(true);
+  expect(called2).toBe(true);
+});
+
+it('Keyboard handleButtonMouseUp will work with preventMouseUpDefault and stopMouseUpPropagation', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    preventMouseUpDefault: true,
+    stopMouseUpPropagation: true
+  });
+  let called = false;
+  let called2 = false;
+
+  keyboard.handleButtonMouseUp("q", {
+    target: keyboard.getButtonElement("q"),
+    preventDefault: () => {
+      called = true
+    },
+    stopPropagation: () => {
+      called2 = true;
+    }
+  });
+
+  keyboard.getButtonElement("q").onclick();
+  document.onmouseup({
+    target: document.body
+  });
+
+  expect(called).toBe(true);
+  expect(called2).toBe(true);
 });
 
 it('Keyboard onModulesLoaded will work', () => {