Allow CandidateBox caret positioning, passing event though onChange. Per https://github.com/hodgef/react-simple-keyboard/issues/1298

src/demo/CandidateBoxDemo.js

@@ -0,0 +1,81 @@
+import Keyboard from "../lib";
+import "./css/CandidateBoxDemo.css";
+
+const setDOM = () => {
+  document.querySelector("body").innerHTML = `
+    <input class="input" placeholder="Tap on the virtual keyboard to start" />
+    <div class="simple-keyboard"></div>
+  `;
+};
+
+class Demo {
+  constructor() {
+    setDOM();
+
+    /**
+     * Demo Start
+     */
+    this.keyboard = new Keyboard({
+      onChange: input => this.onChange(input),
+      onKeyPress: button => this.onKeyPress(button),
+      preventMouseDownDefault: true,
+      layoutCandidates: {
+        ni: "你 尼",
+        hao: "好 号"
+      }
+    });
+
+    /**
+     * Update simple-keyboard when input is changed directly
+     */
+    document.querySelector(".input").addEventListener("input", event => {
+      this.keyboard.setInput(event.target.value);
+    });
+  }
+
+  onChange(input) {
+    const inputElement = document.querySelector(".input");
+
+    /**
+     * Updating input's value
+     */
+    inputElement.value = input;
+    console.log("Input changed", input);
+
+    /**
+     * Synchronizing input caret position
+     */
+    const caretPosition = this.keyboard.caretPosition;
+    if (caretPosition !== null)
+      this.setInputCaretPosition(inputElement, caretPosition);
+
+    console.log("caretPosition", caretPosition);
+  }
+
+  setInputCaretPosition(elem, pos) {
+    if (elem.setSelectionRange) {
+      elem.focus();
+      elem.setSelectionRange(pos, pos);
+    }
+  }
+
+  onKeyPress(button) {
+    console.log("Button pressed", button);
+
+    /**
+     * If you want to handle the shift and caps lock buttons
+     */
+    if (button === "{shift}" || button === "{lock}") this.handleShift();
+  }
+
+  handleShift() {
+    const currentLayout = this.keyboard.options.layoutName;
+    const shiftToggle = currentLayout === "default" ? "shift" : "default";
+
+    this.keyboard.setOptions({
+      layoutName: shiftToggle
+    });
+  }
+}
+
+export default Demo;

src/demo/css/CandidateBoxDemo.css

@@ -0,0 +1,12 @@
+input {
+  width: 100%;
+  height: 100px;
+  padding: 20px;
+  font-size: 20px;
+  border: none;
+  box-sizing: border-box;
+}
+
+.simple-keyboard {
+  max-width: 850px;
+}

src/demo/index.js

@@ -9,6 +9,7 @@ import BasicDemo from "./BasicDemo";
 //import DOMElementDemo from "./DOMElementDemo";
 //import FullKeyboardDemo from "./FullKeyboardDemo";
 //import MultipleKeyboardsDemo from "./MultipleKeyboardsDestroyDemo";
+//import CandidateBoxDemo from "./CandidateBoxDemo";
 
 /**
  * Selected demo

src/demo/tests/CandidateBoxDemo.test.js

@@ -0,0 +1,36 @@
+import { setDOM } from '../../utils/TestUtility';
+import CandidateBoxDemo from '../CandidateBoxDemo';
+
+it('Demo will load', () => {
+  setDOM();
+
+  new CandidateBoxDemo();
+});
+
+it('Demo caret positioning will adjust accordingly', () => {
+  setDOM();
+
+  const demo = new CandidateBoxDemo();
+
+  demo.keyboard.setCaretPosition(0);
+
+  demo.keyboard.getButtonElement("n").click();
+  demo.keyboard.getButtonElement("h").click();
+  demo.keyboard.getButtonElement("a").click();
+  demo.keyboard.getButtonElement("o").click();
+  expect(demo.keyboard.getCaretPosition()).toBe(4);
+
+  demo.keyboard.candidateBox.candidateBoxElement.querySelector("li").click();
+
+  expect(demo.keyboard.getCaretPosition()).toBe(2);
+
+  demo.keyboard.setCaretPosition(1);
+  demo.keyboard.getButtonElement("i").click();
+
+  expect(demo.keyboard.getCaretPosition()).toBe(2);
+
+  demo.keyboard.candidateBox.candidateBoxElement.querySelector("li").click();
+
+  expect(demo.keyboard.getCaretPosition()).toBe(1);
+  expect(demo.keyboard.getInput()).toBe("你好");
+});