@startlibs/form 1.1.2 → 1.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startlibs/form",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Startlibs Form",
   "main": "lib/index.cjs",
   "exports": {

package/src/AutoComplete.jsx

@@ -611,15 +611,24 @@ export class AutoCompleteTextbox extends React.Component {
     return nextProps.value !== cleanText(this.el.innerText) || !!Object.keys(nextProps).find((k) => nextProps[k] !== this.props[k])
   }
 
-  componentDidUpdate(oldProps) {
+  // Only a programmatic change (not the user typing) should move the caret to the end
+  getSnapshotBeforeUpdate() {
+    return this.props.value !== cleanText(this.el.innerText)
+  }
+
+  componentDidUpdate(oldProps, prevState, changedOutside) {
+    let rewritten = false
     if (this.props.value.slice(-1) === ' ' && /\S/.test(this.el.textContent.slice(-1))) { // does not have blank space as last
       this.el.innerHTML = this.props.value.replace(/\s/, ' ')
+      rewritten = true
     }
-    if (this.props.value !== oldProps.value && document.activeElement === this.el) {
+    if (this.props.value !== oldProps.value && (changedOutside || rewritten) && document.activeElement === this.el) {
       setSelectionRange(this.el.firstChild || this.el, this.el.textContent.length + 1)
     }
   }
 
+  setEl = ref => this.el = ref
+
   onPaste = (ev) => {
     ev.preventDefault()
     const text = ev.clipboardData.getData('text')
@@ -631,7 +640,8 @@ export class AutoCompleteTextbox extends React.Component {
     const valueOrBlank = /*android fix, not needed? value || */ _.isString(value) && value ? value : '\u200b'
 
     const props = {
-      innerRef: ref => this.el = ref,
+      // stable ref: a new function each render makes ContentEditable re-render and jump the caret to the end
+      innerRef: this.setEl,
       onKeyDown: this.onKeyDown,
       onPaste: this.onPaste,
       value: value,