diff --git a/src/lib/components/Keyboard.js b/src/lib/components/Keyboard.js index 779aa6b2..30676264 100644 --- a/src/lib/components/Keyboard.js +++ b/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`) } /** diff --git a/src/lib/services/Utilities.js b/src/lib/services/Utilities.js index d49a517d..25ec5217 100644 --- a/src/lib/services/Utilities.js +++ b/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; \ No newline at end of file diff --git a/src/lib/services/tests/Utilities.test.js b/src/lib/services/tests/Utilities.test.js index 38c0f1ea..04255bf5 100644 --- a/src/lib/services/tests/Utilities.test.js +++ b/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();