Added rtl option. Fixes #712

Bumps [@babel/preset-env](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-env) from 7.11.5 to 7.12.0.
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.12.0/packages/babel-preset-env)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

.github/stale.yml

@@ -0,0 +1,17 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 3
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 2
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - pinned
+  - security
+# Label to use when marking an issue as stale
+staleLabel: Stale
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false

README.md

@@ -1,6 +1,6 @@
 <p>
   <a href="https://simple-keyboard.com/demo">
-	<img alt="simple-keyboard: Javscript Virtual Keyboard" src="https://i.imgur.com/Po6659n.gif">
+	<img alt="simple-keyboard: Javascript Virtual Keyboard" src="https://i.imgur.com/Po6659n.gif">
   </a>
 	
   <a href="https://www.npmjs.com/package/simple-keyboard">

build/css/index.css

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

build/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.
      */
@@ -142,6 +152,11 @@ declare module 'simple-keyboard' {
      */
     disableButtonHold?: boolean;
 
+    /**
+     * Adds unicode right-to-left control characters to input return values.
+     */
+    rtl?: boolean;
+
     /**
      * Executes the callback function on key press. Returns button layout name (i.e.: "{shift}").
      */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-keyboard",
-  "version": "2.30.1",
+  "version": "2.31.0",
   "description": "On-screen Javascript Virtual Keyboard",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -40,70 +40,70 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "7.9.0",
+    "@babel/core": "7.12.0",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/preset-env": "^7.11.5",
+    "@babel/preset-env": "^7.12.0",
     "@babel/preset-react": "^7.10.4",
     "@svgr/webpack": "5.4.0",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.8",
     "@typescript-eslint/eslint-plugin": "^2.10.0",
     "@typescript-eslint/parser": "^2.10.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.3.0",
+    "babel-jest": "^26.5.2",
     "babel-loader": "8.1.0",
     "babel-plugin-named-asset-import": "^0.3.6",
     "babel-preset-react-app": "^9.1.2",
-    "camelcase": "^6.0.0",
+    "camelcase": "^6.1.0",
     "case-sensitive-paths-webpack-plugin": "2.3.0",
     "copy-webpack-plugin": "^5.1.2",
-    "css-loader": "4.2.2",
+    "css-loader": "5.0.0",
     "dotenv": "8.2.0",
     "dotenv-expand": "5.1.0",
     "eslint": "^6.8.0",
     "eslint-config-react-app": "^5.0.1",
     "eslint-loader": "4.0.2",
     "eslint-plugin-flowtype": "4.7.0",
-    "eslint-plugin-import": "2.22.0",
+    "eslint-plugin-import": "2.22.1",
     "eslint-plugin-jsx-a11y": "6.3.1",
-    "eslint-plugin-react": "7.20.6",
-    "eslint-plugin-react-hooks": "^4.1.0",
-    "file-loader": "6.1.0",
+    "eslint-plugin-react": "7.21.4",
+    "eslint-plugin-react-hooks": "^4.1.2",
+    "file-loader": "6.1.1",
     "fs-extra": "9.0.1",
-    "html-webpack-plugin": "4.4.1",
+    "html-webpack-plugin": "4.5.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "26.4.2",
+    "jest": "26.5.3",
     "jest-environment-jsdom-fourteen": "1.0.1",
-    "jest-resolve": "26.4.0",
-    "jest-watch-typeahead": "0.6.0",
-    "mini-css-extract-plugin": "0.11.0",
+    "jest-resolve": "26.5.2",
+    "jest-watch-typeahead": "0.6.1",
+    "mini-css-extract-plugin": "1.0.0",
     "optimize-css-assets-webpack-plugin": "5.0.4",
     "pnp-webpack-plugin": "1.6.4",
     "postcss-flexbugs-fixes": "4.2.1",
     "postcss-loader": "3.0.0",
     "postcss-normalize": "9.0.0",
     "postcss-preset-env": "6.7.0",
-    "postcss-safe-parser": "4.0.2",
+    "postcss-safe-parser": "5.0.2",
     "prettier": "^1.19.1",
     "prettier-webpack-plugin": "^1.2.0",
-    "react": "^16.13.1",
+    "react": "^16.14.0",
     "react-app-polyfill": "^1.0.6",
     "react-dev-utils": "^10.2.1",
     "react-dom": "^16.13.1",
     "resolve": "1.17.0",
     "resolve-url-loader": "3.1.1",
-    "sass-loader": "10.0.1",
+    "sass-loader": "10.0.3",
     "semver": "7.3.2",
-    "style-loader": "1.2.1",
-    "terser-webpack-plugin": "4.1.0",
+    "style-loader": "2.0.0",
+    "terser-webpack-plugin": "4.2.3",
     "ts-pnp": "1.2.0",
     "uglifyjs-webpack-plugin": "^2.2.0",
-    "url-loader": "4.1.0",
-    "webpack": "4.44.1",
+    "url-loader": "4.1.1",
+    "webpack": "4.44.2",
     "webpack-dev-server": "3.11.0",
     "webpack-manifest-plugin": "2.2.0",
-    "workbox-webpack-plugin": "5.1.3"
+    "workbox-webpack-plugin": "5.1.4"
   },
   "eslintConfig": {
     "extends": "react-app"

src/demo/RTLDemo.js

@@ -0,0 +1,72 @@
+import Keyboard from "../lib";
+import "./css/RTLDemo.css";
+
+const setDOM = () => {
+  document.querySelector("#root").innerHTML = `
+    <input class="input" placeholder="Tap on the virtual keyboard to start" />
+    <div class="simple-keyboard"></div>
+  `;
+};
+
+class Demo {
+  constructor() {
+    setDOM();
+
+    /**
+     * Demo Start
+     */
+    this.keyboard = new Keyboard({
+      onChange: input => this.onChange(input),
+      onKeyPress: button => this.onKeyPress(button),
+      rtl: true,
+      layout: {
+        default: [
+          "\u05e5 1 2 3 4 5 6 7 8 9 0 - = {bksp}",
+          "{tab} \u05e3 \u05df \u05e7 \u05e8 \u05d0 \u05d8 \u05d5 \u05ea \u05dd \u05e4 ] [ \\",
+          "{lock} \u05e9 \u05d3 \u05d2 \u05db \u05e2 \u05d9 \u05d7 \u05dc \u05da : ' {enter}",
+          "{shift} \u05d6 \u05e1 \u05d1 \u05d4 \u05e0 \u05de \u05e6 , . / {shift}",
+          ".com @ {space}"
+        ],
+        shift: [
+          "~ ! @ # $ % ^ & * ( ) _ + {bksp}",
+          "{tab} Q W E R T Y U I O P { } |",
+          '{lock} A S D F G H J K L : " {enter}',
+          "{shift} Z X C V B N M < > ? {shift}",
+          ".com @ {space}"
+        ]
+      }
+    });
+
+    /**
+     * Update simple-keyboard when input is changed directly
+     */
+    document.querySelector(".input").addEventListener("input", event => {
+      this.keyboard.setInput(event.target.value);
+    });
+  }
+
+  onChange(input) {
+    document.querySelector(".input").value = input;
+    console.log("Input changed", input, input.split(""));
+  }
+
+  onKeyPress(button) {
+    console.log("Button pressed", button);
+
+    /**
+     * If you want to handle the shift and caps lock buttons
+     */
+    if (button === "{shift}" || button === "{lock}") this.handleShift();
+  }
+
+  handleShift() {
+    const currentLayout = this.keyboard.options.layoutName;
+    const shiftToggle = currentLayout === "default" ? "shift" : "default";
+
+    this.keyboard.setOptions({
+      layoutName: shiftToggle
+    });
+  }
+}
+
+export default Demo;

src/demo/css/RTLDemo.css

@@ -0,0 +1,13 @@
+input {
+  width: 100%;
+  height: 100px;
+  padding: 20px;
+  font-size: 20px;
+  border: none;
+  box-sizing: border-box;
+  direction: rtl;
+}
+
+.simple-keyboard {
+  max-width: 850px;
+}

src/demo/index.js

@@ -4,6 +4,7 @@ import "./css/index.css";
  * Demos
  */
 import BasicDemo from "./BasicDemo";
+//import RTLDemo from "./RTLDemo";
 //import ButtonThemeDemo from "./ButtonThemeDemo";
 //import DOMElementDemo from "./DOMElementDemo";
 //import FullKeyboardDemo from "./FullKeyboardDemo";

src/demo/tests/RTLDemo.test.js

@@ -0,0 +1,72 @@
+import { setDOM, removeRTLControls } from '../../utils/TestUtility';
+import RTLDemo from '../RTLDemo';
+
+it('Demo will load', () => {
+  setDOM();
+
+  new RTLDemo();
+});
+
+it('Demo onDOMLoaded will work', () => {
+  setDOM();
+
+  const demo = new RTLDemo();
+
+  expect(demo.keyboard).toBeTruthy();
+});
+
+it('Demo onChange will work', () => {
+  setDOM();
+
+  const demo = new RTLDemo();
+
+  demo.onChange("test");
+  
+  expect(removeRTLControls(document.body.querySelector('.input').value)).toBe("test");
+});
+
+it('Demo onChange will work', () => {
+  setDOM();
+
+  const demo = new RTLDemo();
+
+  demo.keyboard.getButtonElement(".").onclick();
+  
+  expect(removeRTLControls(document.body.querySelector('.input').value)).toBe(".");
+});
+
+it('Demo input change will work', () => {
+  setDOM();
+
+  const demo = new RTLDemo();
+
+  document.body.querySelector('.input').value = "test";
+  document.body.querySelector('.input').dispatchEvent(new Event('input'));
+  
+  expect(removeRTLControls(demo.keyboard.getInput())).toBe("test");
+});
+
+it('Demo handleShiftButton will work', () => {
+  setDOM();
+
+  const demo = new RTLDemo();
+
+  demo.keyboard.getButtonElement("{shift}")[0].onclick();
+  expect(demo.keyboard.options.layoutName).toBe("shift");
+
+  demo.keyboard.getButtonElement("{shift}")[0].onclick();
+  expect(demo.keyboard.options.layoutName).toBe("default");
+});
+
+it('RTL control caracters will be added to ', () => {
+  setDOM();
+
+  const demo = new RTLDemo();
+
+  demo.keyboard.getButtonElement("פ").onclick();
+  demo.keyboard.getButtonElement("ם").onclick();
+  demo.keyboard.getButtonElement("[").onclick();
+
+  expect(demo.keyboard.getInput()).toBe("‫פם[‬");
+  expect(demo.keyboard.input[demo.keyboard.options.inputName]).toBe("פם[");
+});

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.
      */
@@ -142,6 +152,11 @@ declare module 'simple-keyboard' {
      */
     disableButtonHold?: boolean;
 
+    /**
+     * Adds unicode right-to-left control characters to input return values.
+     */
+    rtl?: boolean;
+
     /**
      * Executes the callback function on key press. Returns button layout name (i.e.: "{shift}").
      */

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}”).
@@ -81,6 +83,7 @@ class SimpleKeyboard {
      * @property {boolean} useMouseEvents Opt out of PointerEvents handling, falling back to the prior mouse event logic.
      * @property {function} destroy Clears keyboard listeners and DOM elements.
      * @property {boolean} disableButtonHold Disable button hold action.
+     * @property {boolean} rtl Adds unicode right-to-left control characters to input return values.
      * @property {function} onKeyReleased Executes the callback function on key release.
      * @property {array} modules Module classes to be loaded by simple-keyboard.
      */
@@ -290,7 +293,7 @@ class SimpleKeyboard {
         true
       );
 
-      if (debug) console.log("Input changed:", this.input);
+      if (debug) console.log("Input changed:", this.getAllInputs());
 
       if (this.options.debug) {
         console.log(
@@ -310,13 +313,13 @@ class SimpleKeyboard {
        * Calling onChange
        */
       if (typeof this.options.onChange === "function")
-        this.options.onChange(this.input[this.options.inputName]);
+        this.options.onChange(this.getInput(this.options.inputName, true));
 
       /**
        * Calling onChangeAll
        */
       if (typeof this.options.onChangeAll === "function")
-        this.options.onChangeAll(this.input);
+        this.options.onChangeAll(this.getAllInputs());
     }
 
     if (debug) {
@@ -379,20 +382,25 @@ class SimpleKeyboard {
   /**
    * Handles button mouseup
    */
-  handleButtonMouseUp(button) {
-    this.dispatch(instance => {
+  handleButtonMouseUp(button = null, e = null) {
+    if (e) {
       /**
-       * Remove active class
+       * Handle event options
        */
-      instance.recurseButtons(buttonElement => {
-        buttonElement.classList.remove(this.activeButtonClass);
-      });
+      if (this.options.preventMouseUpDefault) e.preventDefault();
+      if (this.options.stopMouseUpPropagation) e.stopPropagation();
+    }
 
-      instance.isMouseHold = false;
-      if (instance.holdInteractionTimeout)
-        clearTimeout(instance.holdInteractionTimeout);
+    /**
+     * Remove active class
+     */
+    this.recurseButtons(buttonElement => {
+      buttonElement.classList.remove(this.activeButtonClass);
     });
 
+    this.isMouseHold = false;
+    if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout);
+
     /**
      * Calling onKeyReleased
      */
@@ -463,15 +471,38 @@ class SimpleKeyboard {
    * Get the keyboard’s input (You can also get it from the onChange prop).
    * @param  {string} [inputName] optional - the internal input to select
    */
-  getInput(inputName) {
+  getInput(inputName, skipSync = false) {
     inputName = inputName || this.options.inputName;
 
     /**
      * Enforce syncInstanceInputs, if set
      */
-    if (this.options.syncInstanceInputs) this.syncInstanceInputs();
+    if (this.options.syncInstanceInputs && !skipSync) this.syncInstanceInputs();
 
-    return this.input[inputName];
+    if (this.options.rtl) {
+      // Remove existing control chars
+      const inputWithoutRTLControl = this.input[inputName]
+        .replace("\u202B", "")
+        .replace("\u202C", "");
+
+      return "\u202B" + inputWithoutRTLControl + "\u202C";
+    } else {
+      return this.input[inputName];
+    }
+  }
+
+  /**
+   * Get all simple-keyboard inputs
+   */
+  getAllInputs() {
+    const output = {};
+    const inputNames = Object.keys(this.input);
+
+    inputNames.forEach(inputName => {
+      output[inputName] = this.getInput(inputName, true);
+    });
+
+    return output;
   }
 
   /**
@@ -543,7 +574,6 @@ class SimpleKeyboard {
       /**
        * inputName changed. This requires a caretPosition reset
        */
-      // TODO: Review side-effects
       if (this.options.debug) {
         console.log("inputName changed. caretPosition reset.");
       }
@@ -741,8 +771,6 @@ class SimpleKeyboard {
    * Handles simple-keyboard event listeners
    */
   setEventListeners() {
-    const { useTouchEvents, useMouseEvents } = this.options;
-
     /**
      * Only first instance should set the event listeners
      */
@@ -754,42 +782,10 @@ class SimpleKeyboard {
       /**
        * Event Listeners
        */
-      document.onkeyup = this.handleKeyUp;
-      document.onkeydown = this.handleKeyDown;
-
-      /**
-       * Pointer events
-       */
-      if (
-        this.utilities.pointerEventsSupported() &&
-        !useTouchEvents &&
-        !useMouseEvents
-      ) {
-        document.onpointerdown = this.handlePointerDown;
-        document.onpointerup = this.handlePointerUp;
-        document.onpointercancel = this.handlePointerUp;
-
-        this.keyboardDOM.onpointerdown = this.handleKeyboardContainerMouseDown;
-
-        /**
-         * Touch events
-         */
-      } else if (useTouchEvents) {
-        document.ontouchstart = this.handlePointerDown;
-        document.ontouchend = this.handlePointerUp;
-        document.ontouchcancel = this.handlePointerUp;
-
-        this.keyboardDOM.ontouchstart = this.handleKeyboardContainerMouseDown;
-
-        /**
-         * Mouse events
-         */
-      } else if (!useTouchEvents) {
-        document.onmousedown = this.handlePointerDown;
-        document.onmouseup = this.handlePointerUp;
-
-        this.keyboardDOM.onmousedown = this.handleKeyboardContainerMouseDown;
-      }
+      document.addEventListener("keyup", this.handleKeyUp);
+      document.addEventListener("keydown", this.handleKeyDown);
+      document.addEventListener("mouseup", this.handleMouseUp);
+      document.addEventListener("touchend", this.handleTouchEnd);
     }
   }
 
@@ -814,17 +810,17 @@ class SimpleKeyboard {
   }
 
   /**
-   * Event Handler: PointerDown
+   * Event Handler: MouseUp
    */
-  handlePointerDown(event) {
+  handleMouseUp(event) {
     this.caretEventHandler(event);
   }
 
   /**
-   * Event Handler: PointerUp
+   * Event Handler: TouchEnd
    */
-  handlePointerUp(event) {
-    this.handleButtonMouseUp();
+  /* istanbul ignore next */
+  handleTouchEnd(event) {
     this.caretEventHandler(event);
   }
 
@@ -832,28 +828,24 @@ class SimpleKeyboard {
    * Called by {@link setEventListeners} when an event that warrants a cursor position update is triggered
    */
   caretEventHandler(event) {
-    if (this.options.disableCaretPositioning) {
-      this.setCaretPosition(null);
-      return;
-    }
-
     let targetTagName;
-
     if (event.target.tagName) {
       targetTagName = event.target.tagName.toLowerCase();
     }
 
-    /* istanbul ignore next */
     this.dispatch(instance => {
       const isKeyboard =
         event.target === instance.keyboardDOM ||
         (event.target && instance.keyboardDOM.contains(event.target));
 
-      // if (!this.isMouseHold) {
-      //   instance.isMouseHold = false;
-      // }
+      if (instance.isMouseHold) {
+        instance.isMouseHold = false;
+      }
 
-      if (targetTagName === "textarea" || targetTagName === "input") {
+      if (
+        (targetTagName === "textarea" || targetTagName === "input") &&
+        !instance.options.disableCaretPositioning
+      ) {
         /**
          * Tracks current cursor position
          * As keys are pressed, text will be added/removed at that position within the input.
@@ -872,9 +864,10 @@ class SimpleKeyboard {
             `(${instance.keyboardDOMClass})`
           );
         }
-
-        // TODO: Review side-effects
-      } else if (!isKeyboard) {
+      } else if (instance.options.disableCaretPositioning || !isKeyboard) {
+        /**
+         * If we toggled off disableCaretPositioning, we must ensure caretPosition doesn't persist once reactivated.
+         */
         instance.setCaretPosition(null);
       }
     });
@@ -900,6 +893,18 @@ class SimpleKeyboard {
         `Destroying simple-keyboard instance: ${this.currentInstanceName}`
       );
 
+    /**
+     * Remove document listeners
+     */
+    document.removeEventListener("keyup", this.handleKeyUp);
+    document.removeEventListener("keydown", this.handleKeyDown);
+    document.removeEventListener("mouseup", this.handleMouseUp);
+    document.removeEventListener("touchend", this.handleTouchEnd);
+    document.onpointerup = null;
+    document.ontouchend = null;
+    document.ontouchcancel = null;
+    document.onmouseup = null;
+
     /**
      * Remove buttons
      */
@@ -919,6 +924,8 @@ class SimpleKeyboard {
     };
 
     this.recurseButtons(deleteButton);
+
+    this.recurseButtons = null;
     deleteButton = null;
 
     /**
@@ -933,55 +940,12 @@ class SimpleKeyboard {
      */
     this.clear();
 
-    /**
-     * Remove timouts
-     */
-    /* istanbul ignore next */
-    if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout);
-    /* istanbul ignore next */
-    if (this.holdTimeout) clearTimeout(this.holdTimeout);
-
     /**
      * Remove instance
      */
     window["SimpleKeyboardInstances"][this.currentInstanceName] = null;
     delete window["SimpleKeyboardInstances"][this.currentInstanceName];
 
-    /**
-     * Removing document listeners if there are no more instances
-     */
-    if (!Object.keys(window["SimpleKeyboardInstances"]).length) {
-      /**
-       * Remove document listeners
-       */
-      document.onkeydown = null;
-      document.onkeyup = null;
-
-      document.onpointerdown = null;
-      document.onpointerup = null;
-
-      document.onmousedown = null;
-      document.onmouseup = null;
-
-      document.ontouchstart = null;
-      document.ontouchend = null;
-      document.ontouchcancel = null;
-
-      if (this.options.debug) {
-        console.log(
-          "Destroy: No instances remaining. Document listeners removed",
-          window["SimpleKeyboardInstances"]
-        );
-      }
-    } else {
-      if (this.options.debug) {
-        console.log(
-          "Destroy: Instances remaining! Document listeners not removed",
-          window["SimpleKeyboardInstances"]
-        );
-      }
-    }
-
     /**
      * Reset initialized flag
      */
@@ -1466,11 +1430,11 @@ class SimpleKeyboard {
             this.handleButtonClicked(button);
             this.handleButtonMouseDown(button, e);
           };
-          buttonDOM.onpointerup = () => {
-            this.handleButtonMouseUp(button);
+          buttonDOM.onpointerup = e => {
+            this.handleButtonMouseUp(button, e);
           };
-          buttonDOM.onpointercancel = () => {
-            this.handleButtonMouseUp(button);
+          buttonDOM.onpointercancel = e => {
+            this.handleButtonMouseUp(button, e);
           };
         } else {
           /**
@@ -1484,24 +1448,25 @@ class SimpleKeyboard {
               this.handleButtonClicked(button);
               this.handleButtonMouseDown(button, e);
             };
-            buttonDOM.ontouchend = () => {
-              this.handleButtonMouseUp(button);
+            buttonDOM.ontouchend = e => {
+              this.handleButtonMouseUp(button, e);
             };
-            buttonDOM.ontouchcancel = () => {
-              this.handleButtonMouseUp(button);
+            buttonDOM.ontouchcancel = e => {
+              this.handleButtonMouseUp(button, e);
             };
           } else {
             /**
              * Handle mouse events
              */
             buttonDOM.onclick = () => {
+              this.isMouseHold = false;
               this.handleButtonClicked(button);
             };
             buttonDOM.onmousedown = e => {
               this.handleButtonMouseDown(button, e);
             };
-            buttonDOM.onmouseup = () => {
-              this.handleButtonMouseUp(button);
+            buttonDOM.onmouseup = e => {
+              this.handleButtonMouseUp(button, e);
             };
           }
         }
@@ -1565,6 +1530,36 @@ class SimpleKeyboard {
        */
       this.initialized = true;
 
+      /**
+       * Handling parent events
+       */
+      /* istanbul ignore next */
+      if (
+        this.utilities.pointerEventsSupported() &&
+        !useTouchEvents &&
+        !useMouseEvents
+      ) {
+        document.onpointerup = () => this.handleButtonMouseUp();
+        this.keyboardDOM.onpointerdown = e =>
+          this.handleKeyboardContainerMouseDown(e);
+      } else if (useTouchEvents) {
+        /**
+         * Handling ontouchend, ontouchcancel
+         */
+        document.ontouchend = () => this.handleButtonMouseUp();
+        document.ontouchcancel = () => this.handleButtonMouseUp();
+
+        this.keyboardDOM.ontouchstart = e =>
+          this.handleKeyboardContainerMouseDown(e);
+      } else if (!useTouchEvents) {
+        /**
+         * Handling mouseup
+         */
+        document.onmouseup = () => this.handleButtonMouseUp();
+        this.keyboardDOM.onmousedown = e =>
+          this.handleKeyboardContainerMouseDown(e);
+      }
+
       /**
        * Calling onInit
        */

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

@@ -590,13 +590,15 @@ it('Keyboard will receive physical keyboard events', () => {
     physicalKeyboardHighlight: true
   });
 
-  document.onkeyup({
+  document.dispatchEvent(new KeyboardEvent('keyup', {
     charCode: 0,
     code: "KeyF",
     key: "f",
     which: 70,
-    target: document.createElement('input')
-  });
+    target: {
+      tagName: "input"
+    }
+  }));
 });
 
 it('Keyboard caretEventHandler will detect input, textarea focus', () => {
@@ -927,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: () => {},
-    stopPropagation: () => {}
+    preventDefault: () => {
+      called = true;
+    },
+    stopPropagation: () => {
+      called2 = true;
+    }
   });
 
   keyboard.getButtonElement("q").onclick();
@@ -942,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', () => {
@@ -1224,15 +1266,15 @@ it('Keyboard destroy will work', () => {
   expect(document.onkeydown).toBe(null);
   expect(document.onkeyup).toBe(null);
 
-  expect(document.onpointerdown).toBe(null);
-  expect(document.onpointerup).toBe(null);
+  // expect(document.onpointerdown).toBe(null);
+  // expect(document.onpointerup).toBe(null);
 
-  expect(document.onmousedown).toBe(null);
-  expect(document.onmouseup).toBe(null);
+  // expect(document.onmousedown).toBe(null);
+  // expect(document.onmouseup).toBe(null);
 
-  expect(document.ontouchstart).toBe(null);
-  expect(document.ontouchend).toBe(null);
-  expect(document.ontouchcancel).toBe(null);
+  // expect(document.ontouchstart).toBe(null);
+  // expect(document.ontouchend).toBe(null);
+  // expect(document.ontouchcancel).toBe(null);
 
   expect(keyboard.initialized).toBe(false);
 });
@@ -1263,7 +1305,6 @@ it('Keyboard caretEventHandler will be triggered on mouseup and ontouchend', ()
   });
 
   keyboard.setCaretPosition(6);
-
   expect(keyboard.getCaretPosition()).toBe(6);
 
   const event = {
@@ -1380,17 +1421,32 @@ it('Keyboard handleKeyboardContainerMouseDown will respect preventMouseDownDefau
   expect(works).toBe(true);
 });
 
-it('Keyboard handlePointerDown will work', () => {
+it('Keyboard caret positioning will work', () => {
   setDOM();
 
-  const keyboard = new Keyboard();
+  const keyboard = new Keyboard({
+    onKeyPress: (button) => {
+      if (button === "{shift}" || button === "{lock}") handleShift();
+      else if (keyboard.options.layoutName === "shift") handleShift();
+    }
+  });
 
-  keyboard.setCaretPosition(3);
-  expect(keyboard.getCaretPosition()).toBe(3);
+  function handleShift() {
+    const currentLayout = keyboard.options.layoutName;
+    const shiftToggle = currentLayout === "default" ? "shift" : "default";
+  
+    keyboard.setOptions({
+      layoutName: shiftToggle
+    });
+  }
 
-  triggerDocumentPointerDown({
-    target: document.body
-  })
+  keyboard.getButtonElement("h").onpointerdown();
+  keyboard.getButtonElement("o").onpointerdown();
+  keyboard.setCaretPosition(1);
+  keyboard.getButtonElement("{shift}")[0].onpointerdown();
+  keyboard.getButtonElement("E").onpointerdown();
+  keyboard.getButtonElement("l").onpointerdown();
+  keyboard.getButtonElement("l").onpointerdown();
 
-  expect(keyboard.getCaretPosition()).toBe(null);
+  expect(keyboard.getInput()).toBe("hEllo");
 });

src/utils/TestUtility.js

@@ -26,13 +26,17 @@
   /**
    * Trigger pointerup
    */
-  export const triggerDocumentPointerUp = (e = {}) => (document.onpointerup || document.onmouseup || document.ontouchstart)(e);
+  export const triggerDocumentPointerUp = (e = {}) => {
+    document.dispatchEvent(new MouseEvent('mouseup', e));
+  };
 
   /**
    * Trigger pointerdown
    */
-  export const triggerDocumentPointerDown = (e = {}) => (document.onpointerdown || document.onmousedown || document.ontouchend)(e);
-
+  export const triggerDocumentPointerDown = (e = {}) => {
+    document.dispatchEvent(new MouseEvent('mousedown', e));
+  };
+ 
   /**
    * Test if standard buttons respect maxLength and do input a value
    */
@@ -118,3 +122,10 @@
       });
     });
   }
+
+  /**
+   * Remove RTL control chars
+   */
+  export const removeRTLControls = (input) => {
+    return input.replace("\u202B", "").replace("\u202C", "");
+  }