Bind caret handler events once regardless of number of instances

src/lib/components/Keyboard.js

@@ -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/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);
@@ -183,11 +184,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})`);
     }
   }
 
@@ -216,10 +238,6 @@ class Utilities {
 
     }
 
-    if(this.simpleKeyboardInstance.options.debug && moveCaret){
-      console.log("Caret at:", position);
-    }
-
     return output;
   }
 
@@ -268,10 +286,6 @@ class Utilities {
       }
     }
 
-    if(this.simpleKeyboardInstance.options.debug && moveCaret){
-      console.log("Caret at:", this.simpleKeyboardInstance.caretPosition);
-    }
-
     return output;
   }
   /**
@@ -355,7 +369,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();