build update

README.md

@@ -1,12 +1,13 @@
 <div align="center">
   <a href="https://simple-keyboard.com/demo" title="View Demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/simplekeyboard-banner_B.png" align="center" width="100%"></a>
-  <a href="https://simple-keyboard.com/demo" title="View Demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/simple-keyboard-10172018.gif" align="center" width="100%"></a>
+  <a href="https://simple-keyboard.com/demo" title="View Demo" target="_blank"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/skdemo-4x2.gif" align="center" width="100%"></a>
   <blockquote>The easily customisable and responsive on-screen virtual keyboard for Javascript projects.</blockquote>
-  <p><a href="https://github.com/hodgef/simple-keyboard/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="License"></a>
   <a href="https://www.npmjs.com/package/simple-keyboard" target="_blank"><img src="https://img.shields.io/npm/v/simple-keyboard.svg?style=flat" alt="npm version"></a>
   <a href="https://travis-ci.org/hodgef/simple-keyboard" target="_blank"><img src="https://travis-ci.org/hodgef/simple-keyboard.svg?branch=master" alt="Build Status"></a>
   <a href="https://codecov.io/gh/hodgef/simple-keyboard" target="_blank"><img src="https://img.shields.io/codecov/c/github/hodgef/simple-keyboard/master.svg?style=flat" alt="Coverage Status"></a>
   <a href="https://doc.esdoc.org/github.com/hodgef/simple-keyboard" target="_blank"><img src="https://doc.esdoc.org/github.com/hodgef/simple-keyboard/badge.svg" alt="Documentation Status"></a>
+  <img src="https://img.shields.io/david/dev/hodgef/simple-keyboard.svg" alt="Dev dependencies">
+  <a href="https://www.codacy.com/app/hodgef/simple-keyboard?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=hodgef/simple-keyboard&amp;utm_campaign=Badge_Grade" target="_blank"><img src="https://api.codacy.com/project/badge/Grade/5778fccc6a894701853d9a1f2fb44a76" alt="Codacy Badge"></a>
   </p>
 </div>
 
@@ -34,7 +35,9 @@ Feel free to browse the [Q&A / Use-cases](https://simple-keyboard.com/qa-use-cas
 
 ### Other versions
 
-* ReactJS - [react-simple-keyboard](https://github.com/hodgef/react-simple-keyboard)
+* [React.js](https://github.com/hodgef/react-simple-keyboard)
+* [Angular](https://simple-keyboard.com/demo)
+* [Vue.js](https://simple-keyboard.com/demo)
 
 ### Questions?
 

build/css/index.css

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

docs/class/src/lib/components/Keyboard.js~SimpleKeyboard.html

@@ -175,8 +175,7 @@ This class:</p>
       <div>
         
         
-        <div data-ice="description"><p>Tracks current cursor position
-As keys are pressed, text will be added/removed at that position within the input.</p>
+        <div data-ice="description"><p>Only first instance should insall the caret handling events</p>
 </div>
       </div>
     </td>
@@ -1388,15 +1387,14 @@ As keys are pressed, text will be added/removed at that position within the inpu
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber541">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber512">source</a></span></span>
     </span>
   </h3>
 
   
   
   
-  <div data-ice="description"><p>Tracks current cursor position
-As keys are pressed, text will be added/removed at that position within the input.</p>
+  <div data-ice="description"><p>Only first instance should insall the caret handling events</p>
 </div>
 
   
@@ -1433,7 +1431,7 @@ As keys are pressed, text will be added/removed at that position within the inpu
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber619">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber634">source</a></span></span>
     </span>
   </h3>
 
@@ -1477,7 +1475,7 @@ As keys are pressed, text will be added/removed at that position within the inpu
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber629">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber644">source</a></span></span>
     </span>
   </h3>
 
@@ -1607,7 +1605,7 @@ As keys are pressed, text will be added/removed at that position within the inpu
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber783">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber798">source</a></span></span>
     </span>
   </h3>
 
@@ -2199,7 +2197,7 @@ keyboard.clearInput();</code></pre>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber585">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber600">source</a></span></span>
     </span>
   </h3>
 
@@ -2414,7 +2412,7 @@ keyboard.clearInput();</code></pre>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber521">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber535">source</a></span></span>
     </span>
   </h3>
 
@@ -3086,7 +3084,7 @@ Used interally between re-renders.</p>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber595">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber610">source</a></span></span>
     </span>
   </h3>
 
@@ -3130,7 +3128,7 @@ Used interally between re-renders.</p>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber552">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber567">source</a></span></span>
     </span>
   </h3>
 
@@ -3174,7 +3172,7 @@ Used interally between re-renders.</p>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber577">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber592">source</a></span></span>
     </span>
   </h3>
 
@@ -3218,7 +3216,7 @@ Used interally between re-renders.</p>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber569">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber584">source</a></span></span>
     </span>
   </h3>
 
@@ -3342,7 +3340,7 @@ Used interally between re-renders.</p>
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber636">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/components/Keyboard.js.html#lineNumber651">source</a></span></span>
     </span>
   </h3>
 

docs/class/src/lib/services/Utilities.js~Utilities.html

@@ -501,6 +501,35 @@
     <td>
       
       
+    </td>
+  </tr>
+<tr data-ice="target">
+    <td>
+      <span class="access" data-ice="access">public</span>
+      
+      
+      
+      <span class="override" data-ice="override"></span>
+    </td>
+    <td>
+      <div>
+        <p>
+          
+          
+          
+          <span class="code" data-ice="name"><span><a href="class/src/lib/services/Utilities.js~Utilities.html#instance-method-updateCaretPosAction">updateCaretPosAction</a></span></span><span class="code" data-ice="signature">(instance: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span>, length: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span>, minus: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span>)</span>
+        </p>
+      </div>
+      <div>
+        
+        
+        <div data-ice="description"><p>Action method of updateCaretPos</p>
+</div>
+      </div>
+    </td>
+    <td>
+      
+      
     </td>
   </tr>
 </tbody>
@@ -572,7 +601,7 @@
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber308">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber322">source</a></span></span>
     </span>
   </h3>
 
@@ -661,7 +690,7 @@
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber202">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber224">source</a></span></span>
     </span>
   </h3>
 
@@ -755,7 +784,7 @@
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber345">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber359">source</a></span></span>
     </span>
   </h3>
 
@@ -828,7 +857,7 @@
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber355">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber369">source</a></span></span>
     </span>
   </h3>
 
@@ -908,7 +937,7 @@
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber32">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber33">source</a></span></span>
     </span>
   </h3>
 
@@ -982,7 +1011,7 @@
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber116">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber117">source</a></span></span>
     </span>
   </h3>
 
@@ -1069,7 +1098,7 @@
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber46">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber47">source</a></span></span>
     </span>
   </h3>
 
@@ -1125,7 +1154,7 @@
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber136">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber137">source</a></span></span>
     </span>
   </h3>
 
@@ -1226,7 +1255,7 @@
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber284">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber298">source</a></span></span>
     </span>
   </h3>
 
@@ -1310,7 +1339,7 @@
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber336">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber350">source</a></span></span>
     </span>
   </h3>
 
@@ -1366,7 +1395,7 @@
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber233">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber251">source</a></span></span>
     </span>
   </h3>
 
@@ -1453,7 +1482,7 @@
     <span class="right-info">
       
       
-      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber185">source</a></span></span>
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber186">source</a></span></span>
     </span>
   </h3>
 
@@ -1508,6 +1537,81 @@
 
   
   
+</div>
+<div class="detail" data-ice="detail">
+  <h3 data-ice="anchor" id="instance-method-updateCaretPosAction">
+    <span class="access" data-ice="access">public</span>
+    
+    
+    
+    
+    
+    <span class="code" data-ice="name">updateCaretPosAction</span><span class="code" data-ice="signature">(instance: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span>, length: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span>, minus: <span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span>)</span>
+    <span class="right-info">
+      
+      
+      <span data-ice="source"><span><a href="file/src/lib/services/Utilities.js.html#lineNumber203">source</a></span></span>
+    </span>
+  </h3>
+
+  
+  
+  
+  <div data-ice="description"><p>Action method of updateCaretPos</p>
+</div>
+
+  
+
+  <div data-ice="properties"><div data-ice="properties">
+  <h4 data-ice="title">Params:</h4>
+  <table class="params">
+    <thead>
+    <tr><td>Name</td><td>Type</td><td>Attribute</td><td>Description</td></tr>
+    </thead>
+    <tbody>
+    
+    <tr data-ice="property" data-depth="0">
+      <td data-ice="name" class="code" data-depth="0">instance</td>
+      <td data-ice="type" class="code"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">object</a></span></td>
+      <td data-ice="appendix"></td>
+      <td data-ice="description"><p>The instance whose position should be updated</p>
+</td>
+    </tr>
+<tr data-ice="property" data-depth="0">
+      <td data-ice="name" class="code" data-depth="0">length</td>
+      <td data-ice="type" class="code"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></span></td>
+      <td data-ice="appendix"></td>
+      <td data-ice="description"><p>Represents by how many characters the input should be moved</p>
+</td>
+    </tr>
+<tr data-ice="property" data-depth="0">
+      <td data-ice="name" class="code" data-depth="0">minus</td>
+      <td data-ice="type" class="code"><span><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></span></td>
+      <td data-ice="appendix"></td>
+      <td data-ice="description"><p>Whether the cursor should be moved to the left or not.</p>
+</td>
+    </tr>
+</tbody>
+  </table>
+</div>
+</div>
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+
+  
+  
 </div>
 </div>
 </div>

docs/coverage.json

@@ -1,7 +1,7 @@
 {
   "coverage": "100%",
-  "expectCount": 77,
-  "actualCount": 77,
+  "expectCount": 78,
+  "actualCount": 78,
   "files": {
     "src/demo/App.js": {
       "expectCount": 8,
@@ -24,8 +24,8 @@
       "undocumentLines": []
     },
     "src/lib/services/Utilities.js": {
-      "expectCount": 15,
-      "actualCount": 15,
+      "expectCount": 16,
+      "actualCount": 16,
       "undocumentLines": []
     },
     "src/lib/tests/TestUtility.js": {

docs/file/src/demo/App.js.html

@@ -85,7 +85,7 @@ class App {
     </div>
     `);
   
-    document.querySelector('.input').addEventListener('change', (event) => {
+    document.querySelector('.input').addEventListener('input', (event) => {
       this.keyboard.setInput(event.target.value);
     });
   }

docs/file/src/lib/components/Keyboard.js.html

@@ -548,44 +548,59 @@ class SimpleKeyboard {
    * Retrieves the current cursor position within a input or textarea (if any)
    */
   handleCaret(){
+    /**
+     * Only first instance should insall the caret handling events
+     */
+    this.caretPosition = null;
+    let simpleKeyboardInstances = window['SimpleKeyboardInstances'];
+
+    if(
+      (
+        simpleKeyboardInstances &&
+        Object.keys(simpleKeyboardInstances)[0] === this.utilities.camelCase(this.keyboardDOMClass)
+      ) ||
+      !simpleKeyboardInstances
+    ){
     if(this.options.debug){
-      console.log("Caret handling started");
+        console.log(`Caret handling started (${this.keyboardDOMClass})`)
     }
 
     document.addEventListener("keyup", this.caretEventHandler);
     document.addEventListener("mouseup", this.caretEventHandler);
     document.addEventListener("touchend", this.caretEventHandler);
   }
+  }
 
   /**
    * Called by {@link handleCaret} when an event that warrants a cursor position update is triggered
    */
   caretEventHandler(event){
     let targetTagName;
-
-    if(this.isMouseHold){
-      this.isMouseHold = false;
-    }
-
     if(event.target.tagName){
       targetTagName = event.target.tagName.toLowerCase();
     }
 
+    this.dispatch(instance => {
+      if(instance.isMouseHold){
+        instance.isMouseHold = false;
+    }
+
     if(
       (targetTagName === "textarea" ||
       targetTagName === "input") &&
-      !this.options.disableCaretPositioning
+        !instance.options.disableCaretPositioning
     ){
       /**
        * Tracks current cursor position
        * As keys are pressed, text will be added/removed at that position within the input.
        */
-      this.caretPosition = event.target.selectionStart;
+        instance.caretPosition = event.target.selectionStart;
 
-      if(this.options.debug){
-        console.log('Caret at: ', event.target.selectionStart, event.target.tagName.toLowerCase());
+        if(instance.options.debug){
+          console.log('Caret at: ', event.target.selectionStart, event.target.tagName.toLowerCase(), `(${instance.keyboardDOMClass})`);
       }     
     }
+    });
   }
 
   /**
@@ -593,7 +608,7 @@ class SimpleKeyboard {
    */
   onInit(){
     if(this.options.debug){
-      console.log("Initialized");
+      console.log(`${this.keyboardDOMClass} Initialized`)
     }
 
     /**

docs/file/src/lib/services/Utilities.js.html

@@ -60,6 +60,7 @@ class Utilities {
     this.getButtonDisplayName = this.getButtonDisplayName.bind(this);
     this.getUpdatedInput = this.getUpdatedInput.bind(this);
     this.updateCaretPos = this.updateCaretPos.bind(this);
+    this.updateCaretPosAction = this.updateCaretPosAction.bind(this);
     this.isMaxLengthReached = this.isMaxLengthReached.bind(this);
     this.camelCase = this.camelCase.bind(this);
     this.countInArray = this.countInArray.bind(this);
@@ -225,11 +226,32 @@ class Utilities {
    * @param  {boolean} minus Whether the cursor should be moved to the left or not.
    */
   updateCaretPos(length, minus){
-    if(minus){
-      if(this.simpleKeyboardInstance.caretPosition > 0)
-        this.simpleKeyboardInstance.caretPosition = this.simpleKeyboardInstance.caretPosition - length;
+    if(this.simpleKeyboardInstance.options.syncInstanceInputs){
+      this.simpleKeyboardInstance.dispatch(instance => {
+        this.updateCaretPosAction(instance, length, minus);
+      });
     } else {
-      this.simpleKeyboardInstance.caretPosition = this.simpleKeyboardInstance.caretPosition + length;
+      this.updateCaretPosAction(this.simpleKeyboardInstance, length, minus);
+    }
+  }
+
+  /**
+   * Action method of updateCaretPos
+   * 
+   * @param  {object} instance The instance whose position should be updated
+   * @param  {number} length Represents by how many characters the input should be moved
+   * @param  {boolean} minus Whether the cursor should be moved to the left or not.
+   */
+  updateCaretPosAction(instance, length, minus){
+    if(minus){
+      if(instance.caretPosition > 0)
+      instance.caretPosition = instance.caretPosition - length;
+    } else {
+      instance.caretPosition = instance.caretPosition + length;
+    }
+
+    if(this.simpleKeyboardInstance.options.debug){
+      console.log("Caret at:", instance.caretPosition, `(${instance.keyboardDOMClass})`);
     }
   }
 
@@ -258,10 +280,6 @@ class Utilities {
 
     }
 
-    if(this.simpleKeyboardInstance.options.debug && moveCaret){
-      console.log("Caret at:", position);
-    }
-
     return output;
   }
 
@@ -310,10 +328,6 @@ class Utilities {
       }
     }
 
-    if(this.simpleKeyboardInstance.options.debug && moveCaret){
-      console.log("Caret at:", this.simpleKeyboardInstance.caretPosition);
-    }
-
     return output;
   }
   /**
@@ -397,7 +411,6 @@ class Utilities {
   countInArray(array, value){
     return array.reduce((n, x) => n + (x === value), 0);
   }
-
 }
 
 export default Utilities;</code></pre>

docs/script/search_index.js

@@ -755,6 +755,12 @@ window.esdocSearchIndex = [
     "src/lib/services/Utilities.js~Utilities#updateCaretPos",
     "method"
   ],
+  [
+    "src/lib/services/utilities.js~utilities#updatecaretposaction",
+    "class/src/lib/services/Utilities.js~Utilities.html#instance-method-updateCaretPosAction",
+    "src/lib/services/Utilities.js~Utilities#updateCaretPosAction",
+    "method"
+  ],
   [
     "src/lib/tests/testutility.js",
     "file/src/lib/tests/TestUtility.js.html",

docs/source.html

@@ -39,7 +39,7 @@
 </div>
 </nav>
 
-<div class="content" data-ice="content"><h1>Source <img data-ice="coverageBadge" src="./badge.svg"><span data-ice="totalCoverageCount" class="total-coverage-count">77/77</span></h1>
+<div class="content" data-ice="content"><h1>Source <img data-ice="coverageBadge" src="./badge.svg"><span data-ice="totalCoverageCount" class="total-coverage-count">78/78</span></h1>
 
 <table class="files-summary" data-ice="files" data-use-coverage="true">
   <thead>
@@ -58,9 +58,9 @@
       <td data-ice="filePath"><span><a href="file/src/demo/App.js.html">src/demo/App.js</a></span></td>
       <td data-ice="identifier" class="identifiers"><span><a href="class/src/demo/App.js~App.html">App</a></span></td>
       <td class="coverage"><span data-ice="coverage">100 %</span><span data-ice="coverageCount" class="coverage-count">8/8</span></td>
-      <td style="display: none;" data-ice="size">1919 byte</td>
+      <td style="display: none;" data-ice="size">1918 byte</td>
       <td style="display: none;" data-ice="lines">84</td>
-      <td style="display: none;" data-ice="updated">2018-11-01 00:54:03 (UTC)</td>
+      <td style="display: none;" data-ice="updated">2018-11-01 01:59:07 (UTC)</td>
     </tr>
 <tr data-ice="file">
       <td data-ice="filePath"><span><a href="file/src/demo/index.js.html">src/demo/index.js</a></span></td>
@@ -68,15 +68,15 @@
       <td class="coverage"><span data-ice="coverage">-</span></td>
       <td style="display: none;" data-ice="size">70 byte</td>
       <td style="display: none;" data-ice="lines">5</td>
-      <td style="display: none;" data-ice="updated">2018-11-01 00:54:03 (UTC)</td>
+      <td style="display: none;" data-ice="updated">2018-11-06 21:41:50 (UTC)</td>
     </tr>
 <tr data-ice="file">
       <td data-ice="filePath"><span><a href="file/src/lib/components/Keyboard.js.html">src/lib/components/Keyboard.js</a></span></td>
       <td data-ice="identifier" class="identifiers"><span><a href="class/src/lib/components/Keyboard.js~SimpleKeyboard.html">SimpleKeyboard</a></span></td>
       <td class="coverage"><span data-ice="coverage">100 %</span><span data-ice="coverageCount" class="coverage-count">41/41</span></td>
-      <td style="display: none;" data-ice="size">25831 byte</td>
-      <td style="display: none;" data-ice="lines">800</td>
-      <td style="display: none;" data-ice="updated">2018-11-01 00:59:59 (UTC)</td>
+      <td style="display: none;" data-ice="size">26391 byte</td>
+      <td style="display: none;" data-ice="lines">815</td>
+      <td style="display: none;" data-ice="updated">2018-11-01 01:52:55 (UTC)</td>
     </tr>
 <tr data-ice="file">
       <td data-ice="filePath"><span><a href="file/src/lib/index.js.html">src/lib/index.js</a></span></td>
@@ -84,7 +84,7 @@
       <td class="coverage"><span data-ice="coverage">-</span></td>
       <td style="display: none;" data-ice="size">85 byte</td>
       <td style="display: none;" data-ice="lines">2</td>
-      <td style="display: none;" data-ice="updated">2018-11-01 00:54:03 (UTC)</td>
+      <td style="display: none;" data-ice="updated">2018-11-06 21:41:50 (UTC)</td>
     </tr>
 <tr data-ice="file">
       <td data-ice="filePath"><span><a href="file/src/lib/services/KeyboardLayout.js.html">src/lib/services/KeyboardLayout.js</a></span></td>
@@ -92,7 +92,7 @@
       <td class="coverage"><span data-ice="coverage">100 %</span><span data-ice="coverageCount" class="coverage-count">2/2</span></td>
       <td style="display: none;" data-ice="size">746 byte</td>
       <td style="display: none;" data-ice="lines">28</td>
-      <td style="display: none;" data-ice="updated">2018-11-01 00:54:03 (UTC)</td>
+      <td style="display: none;" data-ice="updated">2018-11-06 21:41:48 (UTC)</td>
     </tr>
 <tr data-ice="file">
       <td data-ice="filePath"><span><a href="file/src/lib/services/PhysicalKeyboard.js.html">src/lib/services/PhysicalKeyboard.js</a></span></td>
@@ -100,15 +100,15 @@
       <td class="coverage"><span data-ice="coverage">100 %</span><span data-ice="coverageCount" class="coverage-count">5/5</span></td>
       <td style="display: none;" data-ice="size">2908 byte</td>
       <td style="display: none;" data-ice="lines">96</td>
-      <td style="display: none;" data-ice="updated">2018-11-01 00:54:03 (UTC)</td>
+      <td style="display: none;" data-ice="updated">2018-11-06 21:41:48 (UTC)</td>
     </tr>
 <tr data-ice="file">
       <td data-ice="filePath"><span><a href="file/src/lib/services/Utilities.js.html">src/lib/services/Utilities.js</a></span></td>
       <td data-ice="identifier" class="identifiers"><span><a href="class/src/lib/services/Utilities.js~Utilities.html">Utilities</a></span></td>
-      <td class="coverage"><span data-ice="coverage">100 %</span><span data-ice="coverageCount" class="coverage-count">15/15</span></td>
-      <td style="display: none;" data-ice="size">11188 byte</td>
-      <td style="display: none;" data-ice="lines">360</td>
-      <td style="display: none;" data-ice="updated">2018-11-01 00:54:03 (UTC)</td>
+      <td class="coverage"><span data-ice="coverage">100 %</span><span data-ice="coverageCount" class="coverage-count">16/16</span></td>
+      <td style="display: none;" data-ice="size">11708 byte</td>
+      <td style="display: none;" data-ice="lines">373</td>
+      <td style="display: none;" data-ice="updated">2018-11-01 01:55:18 (UTC)</td>
     </tr>
 <tr data-ice="file">
       <td data-ice="filePath"><span><a href="file/src/lib/tests/TestUtility.js.html">src/lib/tests/TestUtility.js</a></span></td>
@@ -116,7 +116,7 @@
       <td class="coverage"><span data-ice="coverage">100 %</span><span data-ice="coverageCount" class="coverage-count">6/6</span></td>
       <td style="display: none;" data-ice="size">2830 byte</td>
       <td style="display: none;" data-ice="lines">106</td>
-      <td style="display: none;" data-ice="updated">2018-11-01 00:54:03 (UTC)</td>
+      <td style="display: none;" data-ice="updated">2018-11-06 21:41:47 (UTC)</td>
     </tr>
 </tbody>
 </table>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-keyboard",
-  "version": "2.10.0",
+  "version": "2.11.5",
   "description": "On-screen Javascript Virtual Keyboard",
   "main": "build/index.js",
   "scripts": {
@@ -38,11 +38,11 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "7.1.0",
+    "@babel/core": "7.1.6",
     "@babel/plugin-proposal-class-properties": "^7.1.0",
     "@babel/preset-env": "^7.1.6",
     "@babel/preset-react": "^7.0.0",
-    "@svgr/webpack": "4.0.3",
+    "@svgr/webpack": "4.1.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "9.0.0",
     "babel-jest": "23.6.0",
@@ -53,7 +53,7 @@
     "case-sensitive-paths-webpack-plugin": "2.1.2",
     "chalk": "2.4.1",
     "css-loader": "1.0.1",
-    "dotenv": "6.0.0",
+    "dotenv": "6.1.0",
     "dotenv-expand": "4.2.0",
     "esdoc": "^1.1.0",
     "esdoc-ecmascript-proposal-plugin": "^1.0.0",
@@ -67,30 +67,29 @@
     "eslint-plugin-react": "7.11.1",
     "file-loader": "2.0.0",
     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
-    "fs-extra": "7.0.0",
-    "har-validator": "^5.1.3",
+    "fs-extra": "7.0.1",
     "html-webpack-plugin": "4.0.0-beta.4",
     "identity-obj-proxy": "3.0.0",
     "jest": "23.6.0",
-    "jest-pnp-resolver": "1.0.1",
+    "jest-pnp-resolver": "1.0.2",
     "jest-resolve": "23.6.0",
     "mini-css-extract-plugin": "0.4.4",
     "optimize-css-assets-webpack-plugin": "5.0.1",
     "pnp-webpack-plugin": "1.2.0",
     "postcss-flexbugs-fixes": "4.1.0",
     "postcss-loader": "3.0.0",
-    "postcss-preset-env": "6.0.6",
+    "postcss-preset-env": "6.4.0",
     "postcss-safe-parser": "4.0.1",
-    "react": "^16.6.1",
+    "react": "^16.6.3",
     "react-app-polyfill": "^0.1.3",
     "react-dev-utils": "^6.1.1",
     "react-dom": "^16.6.1",
     "resolve": "1.8.1",
     "sass-loader": "7.1.0",
-    "style-loader": "0.23.0",
+    "style-loader": "0.23.1",
     "terser-webpack-plugin": "1.1.0",
-    "url-loader": "1.1.1",
-    "webpack": "4.25.1",
+    "url-loader": "1.1.2",
+    "webpack": "4.26.1",
     "webpack-dev-server": "3.1.10",
     "webpack-manifest-plugin": "2.0.4",
     "workbox-webpack-plugin": "3.6.3"

src/demo/App.js

@@ -43,7 +43,7 @@ class App {
     </div>
     `);
   
-    document.querySelector('.input').addEventListener('change', (event) => {
+    document.querySelector('.input').addEventListener('input', (event) => {
       this.keyboard.setInput(event.target.value);
     });
   }

src/demo/tests/App.test.js

@@ -48,7 +48,7 @@ it('Demo input change will work', () => {
   demo.onDOMLoaded();
 
   document.body.querySelector('.input').value = "test";
-  document.body.querySelector('.input').dispatchEvent(new Event('change'));
+  document.body.querySelector('.input').dispatchEvent(new Event('input'));
   
   expect(demo.keyboard.getInput()).toBe("test");
 });

src/lib/components/Keyboard.js

@@ -63,7 +63,7 @@ class SimpleKeyboard {
     this.options.layoutName = this.options.layoutName || "default";
     this.options.theme = this.options.theme || "hg-theme-default";
     this.options.inputName = this.options.inputName || "default";
-    this.options.preventMouseDownDefault = this.options.preventMouseDownDefault === false ? false : true;
+    this.options.preventMouseDownDefault = this.options.preventMouseDownDefault || false;
 
     /**
      * @type {object} Classes identifying loaded plugins
@@ -506,44 +506,59 @@ class SimpleKeyboard {
    * Retrieves the current cursor position within a input or textarea (if any)
    */
   handleCaret(){
+    /**
+     * Only first instance should insall the caret handling events
+     */
+    this.caretPosition = null;
+    let simpleKeyboardInstances = window['SimpleKeyboardInstances'];
+
+    if(
+      (
+        simpleKeyboardInstances &&
+        Object.keys(simpleKeyboardInstances)[0] === this.utilities.camelCase(this.keyboardDOMClass)
+      ) ||
+      !simpleKeyboardInstances
+    ){
     if(this.options.debug){
-      console.log("Caret handling started");
+        console.log(`Caret handling started (${this.keyboardDOMClass})`)
     }
 
     document.addEventListener("keyup", this.caretEventHandler);
     document.addEventListener("mouseup", this.caretEventHandler);
     document.addEventListener("touchend", this.caretEventHandler);
   }
+  }
 
   /**
    * Called by {@link handleCaret} when an event that warrants a cursor position update is triggered
    */
   caretEventHandler(event){
     let targetTagName;
-
-    if(this.isMouseHold){
-      this.isMouseHold = false;
-    }
-
     if(event.target.tagName){
       targetTagName = event.target.tagName.toLowerCase();
     }
 
+    this.dispatch(instance => {
+      if(instance.isMouseHold){
+        instance.isMouseHold = false;
+    }
+
     if(
       (targetTagName === "textarea" ||
       targetTagName === "input") &&
-      !this.options.disableCaretPositioning
+        !instance.options.disableCaretPositioning
     ){
       /**
        * Tracks current cursor position
        * As keys are pressed, text will be added/removed at that position within the input.
        */
-      this.caretPosition = event.target.selectionStart;
+        instance.caretPosition = event.target.selectionStart;
 
-      if(this.options.debug){
-        console.log('Caret at: ', event.target.selectionStart, event.target.tagName.toLowerCase());
+        if(instance.options.debug){
+          console.log('Caret at: ', event.target.selectionStart, event.target.tagName.toLowerCase(), `(${instance.keyboardDOMClass})`);
       }     
     }
+    });
   }
 
   /**
@@ -551,7 +566,7 @@ class SimpleKeyboard {
    */
   onInit(){
     if(this.options.debug){
-      console.log("Initialized");
+      console.log(`${this.keyboardDOMClass} Initialized`)
     }
 
     /**

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

@@ -870,6 +870,24 @@ it('Keyboard handleButtonMouseDown will work', () => {
 
 });
 
+it('Keyboard handleButtonMouseDown will work with preventMouseDownDefault', () => {
+  testUtil.setDOM();
+
+  let keyboard = new Keyboard();
+
+  keyboard.options.preventMouseDownDefault = true;
+
+  keyboard.handleButtonMouseDown("q", {
+    target: keyboard.getButtonElement("q")
+  });
+
+  var clickEvent = document.createEvent('MouseEvents');
+  clickEvent.initEvent('mousedown', true, true);
+  keyboard.getButtonElement("q").dispatchEvent(clickEvent);
+  document.onmouseup();
+
+});
+
 it('Keyboard onModulesLoaded will work', () => {
   testUtil.setDOM();
 

src/lib/services/Utilities.js

@@ -18,6 +18,7 @@ class Utilities {
     this.getButtonDisplayName = this.getButtonDisplayName.bind(this);
     this.getUpdatedInput = this.getUpdatedInput.bind(this);
     this.updateCaretPos = this.updateCaretPos.bind(this);
+    this.updateCaretPosAction = this.updateCaretPosAction.bind(this);
     this.isMaxLengthReached = this.isMaxLengthReached.bind(this);
     this.camelCase = this.camelCase.bind(this);
     this.countInArray = this.countInArray.bind(this);
@@ -150,7 +151,7 @@ class Utilities {
       output = this.addStringAt(output, "\n", caretPos, moveCaret);
 
     else if(button.includes("numpad") && Number.isInteger(Number(button[button.length - 2]))){
-      output = this.addStringAt(output, button[button.length - 2], caretPos);
+      output = this.addStringAt(output, button[button.length - 2], caretPos, moveCaret);
     }
     else if(button === "{numpaddivide}")
       output = this.addStringAt(output, '/', caretPos, moveCaret);
@@ -183,14 +184,37 @@ class Utilities {
    * @param  {boolean} minus Whether the cursor should be moved to the left or not.
    */
   updateCaretPos(length, minus){
-    if(minus){
-      if(this.simpleKeyboardInstance.caretPosition > 0)
-        this.simpleKeyboardInstance.caretPosition = this.simpleKeyboardInstance.caretPosition - length;
-    } else {
-      this.simpleKeyboardInstance.caretPosition = this.simpleKeyboardInstance.caretPosition + length;
+    let newCaretPos = this.updateCaretPosAction(this.simpleKeyboardInstance, length, minus);
+
+    if(this.simpleKeyboardInstance.options.syncInstanceInputs){
+      this.simpleKeyboardInstance.dispatch(instance => {
+        instance.caretPosition = newCaretPos;
+      });
     }
   }
 
+  /**
+   * Action method of updateCaretPos
+   * 
+   * @param  {object} instance The instance whose position should be updated
+   * @param  {number} length Represents by how many characters the input should be moved
+   * @param  {boolean} minus Whether the cursor should be moved to the left or not.
+   */
+  updateCaretPosAction(instance, length, minus){
+    if(minus){
+      if(instance.caretPosition > 0)
+      instance.caretPosition = instance.caretPosition - length;
+    } else {
+      instance.caretPosition = instance.caretPosition + length;
+    }
+
+    if(this.simpleKeyboardInstance.options.debug){
+      console.log("Caret at:", instance.caretPosition, `(${instance.keyboardDOMClass})`);
+    }
+
+    return instance.caretPosition;
+  }
+
   /**
    * Adds a string to the input at a given position
    * 
@@ -216,10 +240,6 @@ class Utilities {
 
     }
 
-    if(this.simpleKeyboardInstance.options.debug && moveCaret){
-      console.log("Caret at:", position);
-    }
-
     return output;
   }
 
@@ -268,10 +288,6 @@ class Utilities {
       }
     }
 
-    if(this.simpleKeyboardInstance.options.debug && moveCaret){
-      console.log("Caret at:", this.simpleKeyboardInstance.caretPosition);
-    }
-
     return output;
   }
   /**
@@ -355,7 +371,6 @@ class Utilities {
   countInArray(array, value){
     return array.reduce((n, x) => n + (x === value), 0);
   }
-
 }
 
 export default Utilities;

src/lib/services/tests/Utilities.test.js

@@ -210,6 +210,18 @@ it('Keyboard standard button will affect input', () => {
   }
 });
 
+it('Keyboard updateCaretPos will work with minus', () => {
+  testUtil.setDOM();
+
+  let keyboard = new Keyboard();
+  keyboard.options.syncInstanceInputs = true;
+
+  keyboard.caretPosition = 5;
+  keyboard.utilities.updateCaretPos(2, true);
+
+  expect(keyboard.caretPosition).toBe(3);
+});
+
 it('Keyboard updateCaretPos will work with minus', () => {
   testUtil.setDOM();