diff --git a/src/lib/components/Keyboard.ts b/src/lib/components/Keyboard.ts index 889eb3aa..158f71d1 100644 --- a/src/lib/components/Keyboard.ts +++ b/src/lib/components/Keyboard.ts @@ -23,7 +23,7 @@ import CandidateBox from "./CandidateBox"; class SimpleKeyboard { input!: KeyboardInput; options!: KeyboardOptions; - utilities: any; + utilities!: Utilities; caretPosition!: number | null; caretPositionEnd!: number | null; keyboardDOM!: KeyboardElement; @@ -533,7 +533,8 @@ class SimpleKeyboard { "Caret at: ", this.getCaretPosition(), this.getCaretPositionEnd(), - `(${this.keyboardDOMClass})` + `(${this.keyboardDOMClass})`, + e?.type ); } @@ -573,6 +574,18 @@ class SimpleKeyboard { } } + /** + * After a button is clicked the selection (if any) will disappear + * we should reflect this in our state, as applicable + */ + if(this.caretPositionEnd && this.caretPosition !== this.caretPositionEnd){ + this.setCaretPosition(this.caretPositionEnd, this.caretPositionEnd); + + if(this.options.debug){ + console.log("Caret position aligned", this.caretPosition); + } + } + if (debug) { console.log("Key pressed:", button); } @@ -1116,8 +1129,9 @@ class SimpleKeyboard { document.addEventListener("keydown", this.handleKeyDown, physicalKeyboardHighlightPreventDefault); document.addEventListener("mouseup", this.handleMouseUp); document.addEventListener("touchend", this.handleTouchEnd); - document.addEventListener("select", this.handleSelect); document.addEventListener("selectionchange", this.handleSelectionChange); + // Reporting old caret pos @ https://github.com/hodgef/simple-keyboard/issues/1868 + //document.addEventListener("select", this.handleSelect); } } @@ -1236,7 +1250,8 @@ class SimpleKeyboard { instance.getCaretPosition(), instance.getCaretPositionEnd(), event && event.target.tagName.toLowerCase(), - `(${instance.keyboardDOMClass})` + `(${instance.keyboardDOMClass})`, + event?.type ); } } else if ( diff --git a/src/lib/components/tests/Keyboard.test.js b/src/lib/components/tests/Keyboard.test.js index d1a630e1..bd372dff 100644 --- a/src/lib/components/tests/Keyboard.test.js +++ b/src/lib/components/tests/Keyboard.test.js @@ -1353,6 +1353,43 @@ it('Keyboard will handle selected input with unchanged updatedInput edge case', expect(keyboard.getCaretPositionEnd()).toBe(2); }); +// https://github.com/hodgef/simple-keyboard/issues/1868 +it('Keyboard will handle caret pos sync after partially selected input resolution', () => { + const inputElem = document.createElement("input"); + const onChange = jest.fn(); + const keyboard = new Keyboard({ onChange }); + + keyboard.getButtonElement("q").onpointerdown(); + keyboard.getButtonElement("w").onpointerdown(); + keyboard.getButtonElement("e").onpointerdown(); + keyboard.getButtonElement("r").onpointerdown(); + keyboard.getButtonElement("t").onpointerdown(); + keyboard.getButtonElement("y").onpointerdown(); + + inputElem.setSelectionRange(1, 2); + keyboard.setCaretPosition(1, 2); + + keyboard.getButtonElement("d").onpointerdown(); + keyboard.getButtonElement("d").onpointerdown(); + keyboard.getButtonElement("d").onpointerdown(); + + expect(keyboard.getInput()).toBe("qddderty"); + + inputElem.setSelectionRange(1, 2); + keyboard.setCaretPosition(1, 2); + + keyboard.getButtonElement("d").onpointerdown(); + expect(keyboard.getInput()).toBe("qddderty"); + + // caret position should now be synced + expect(keyboard.getCaretPosition()).toBe(keyboard.getCaretPositionEnd()); + + keyboard.getButtonElement("d").onpointerdown(); + + expect(keyboard.getInput()).toBe("qdddderty"); + expect(keyboard.getCaretPosition()).toBe(3); +}); + it('Ensure caret position is offset when rtl option is enabled', () => { const keyboard = new Keyboard({ useMouseEvents: true, diff --git a/src/lib/services/Utilities.ts b/src/lib/services/Utilities.ts index a2473853..05634428 100644 --- a/src/lib/services/Utilities.ts +++ b/src/lib/services/Utilities.ts @@ -137,7 +137,7 @@ class Utilities { getButtonDisplayName( button: string, display: KeyboardOptions["display"], - mergeDisplay: boolean + mergeDisplay = false ) { if (mergeDisplay) { display = Object.assign({}, this.getDefaultDiplay(), display); @@ -160,12 +160,12 @@ class Utilities { getUpdatedInput( button: string, input: string, - caretPos: number, + caretPos: any, caretPosEnd = caretPos, moveCaret = false ) { const options = this.getOptions(); - const commonParams: [number, number, boolean] = [ + const commonParams: [number | undefined, number | undefined, boolean] = [ caretPos, caretPosEnd, moveCaret, @@ -222,6 +222,10 @@ class Utilities { else if (!button.includes("{") && !button.includes("}")) output = this.addStringAt(output, button, ...commonParams); + if(options.debug){ + console.log("Input will be: "+ output); + } + return output; }