diff --git a/HISTORY.md b/HISTORY.md
index 6a10515..c954a40 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -7,6 +7,8 @@ https://github.com/josdejong/jsoneditor
- Fix #858: the `dist/jsoneditor.js` bundle containing a link to a
non-existing source map.
+- Fix #978: in some special cases the caret was jumping to the beginning of the
+ line whilst typing.
## not yet published, version 8.6.7
diff --git a/src/js/Node.js b/src/js/Node.js
index 1b84397..a5fea78 100644
--- a/src/js/Node.js
+++ b/src/js/Node.js
@@ -1507,6 +1507,12 @@ export class Node {
if (this.dom.value && this.type !== 'array' && this.type !== 'object') {
this.valueInnerText = getInnerText(this.dom.value)
+
+ if (this.valueInnerText === '' && this.dom.value.innerHTML !== '') {
+ // When clearing the contents, often a
remains, messing up the
+ // styling of the empty text box. Therefore we remove the
+ this.dom.value.innerHTML = ''
+ }
}
if (this.valueInnerText !== undefined) {
@@ -1884,6 +1890,12 @@ export class Node {
if (this.dom.field && this.fieldEditable) {
this.fieldInnerText = getInnerText(this.dom.field)
+
+ if (this.fieldInnerText === '' && this.dom.field.innerHTML !== '') {
+ // When clearing the contents, often a
remains, messing up the
+ // styling of the empty text box. Therefore we remove the
+ this.dom.field.innerHTML = ''
+ }
}
if (this.fieldInnerText !== undefined) {
@@ -2213,8 +2225,17 @@ export class Node {
fieldText = ''
}
}
- domField.innerHTML = this._escapeHTML(fieldText)
+ const escapedField = this._escapeHTML(fieldText)
+ if (
+ document.activeElement !== domField ||
+ escapedField !== this._unescapeHTML(getInnerText(domField))
+ ) {
+ // only update if it not has the focus or when there is an actual change,
+ // else you would needlessly loose the caret position when changing tabs
+ // or whilst typing
+ domField.innerHTML = escapedField
+ }
this._updateSchema()
}
@@ -2224,7 +2245,16 @@ export class Node {
if (this.type === 'array' || this.type === 'object') {
this.updateNodeName()
} else {
- domValue.innerHTML = this._escapeHTML(this.value)
+ const escapedValue = this._escapeHTML(this.value)
+ if (
+ document.activeElement !== domValue ||
+ escapedValue !== this._unescapeHTML(getInnerText(domValue))
+ ) {
+ // only update if it not has the focus or when there is an actual change,
+ // else you would needlessly loose the caret position when changing tabs
+ // or whilst typing
+ domValue.innerHTML = escapedValue
+ }
}
}
@@ -2519,9 +2549,11 @@ export class Node {
this._getDomValue()
this._clearValueError()
this._updateDomValue()
+
const escapedValue = this._escapeHTML(this.value)
- if (domValue.innerHTML !== escapedValue) {
- // only update if changed, else you lose the caret position when changing tabs for example
+ if (escapedValue !== this._unescapeHTML(getInnerText(domValue))) {
+ // only update when there is an actual change, else you loose the
+ // caret position when changing tabs or whilst typing
domValue.innerHTML = escapedValue
}
break
@@ -2572,9 +2604,11 @@ export class Node {
case 'blur': {
this._getDomField(true)
this._updateDomField()
+
const escapedField = this._escapeHTML(this.field)
- if (domField.innerHTML !== escapedField) {
- // only update if changed, else you lose the caret position when changing tabs for example
+ if (escapedField !== this._unescapeHTML(getInnerText(domField))) {
+ // only update when there is an actual change, else you loose the
+ // caret position when changing tabs or whilst typing
domField.innerHTML = escapedField
}
break
diff --git a/test/test_build.html b/test/test_build.html
index f27b9d5..6119366 100644
--- a/test/test_build.html
+++ b/test/test_build.html
@@ -57,6 +57,9 @@
},
onChangeJSON: function (json) {
console.log('onChangeJSON', json);
+
+ // test feedback loop which is typical in React -> should not change anything
+ editorTest.update(json)
},
onChangeText: function (text) {
console.log('onChangeText', text);