Ensure caret positioning sync after select resolution. Fixes #1868

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 (

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,

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;
   }