fix-9090: Cursor jumps to front of text paragraph text fields (#9102)

* fix-9090: Cursor jumps to front of text paragraph text fields * fix-9090: Change function updateValue to using the timeout
fossasia · Aug 15, 2023 · 8e074e1 · 8e074e1
1 parent 8dd8fcc
commit 8e074e1
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 14 deletions.
diff --git a/app/components/widgets/forms/rich-text-editor.js b/app/components/widgets/forms/rich-text-editor.js
@@ -1,13 +1,13 @@
 import $ from 'jquery';
 import Component from '@ember/component';
-import { debounce } from '@ember/runloop';
 import { observer, computed } from '@ember/object';
 import { v4 } from 'ember-uuid';
 import { isTesting } from 'open-event-frontend/utils/testing';
 
 export default Component.extend({
 
-  editor: null,
+  editor      : null,
+  timeoutFunc : null,
 
   // Ensure any changes to the parser rules are set in the sanitizer @ services/sanitizer.js
   standardParserRules: {
@@ -37,6 +37,7 @@ export default Component.extend({
   valueObserver: observer('value', function() {
     if (this.editor && this.editor.getValue() !== this.value) {
       this.editor.setValue(this.value);
+      this.editor.focus(true);
     }
   }),
 
@@ -61,11 +62,11 @@ export default Component.extend({
       });
 
       const updateValue = () => {
-        debounce(this, () => {
+        if (this.timeoutFunc) {
+          clearTimeout(this.timeoutFunc);
+        }
+        this.timeoutFunc = setTimeout(() => {
           let value = String(this.editor.getValue()).replace(/(<br>)*$/g, '').replace(/&nbsp;/g, ' ');
-          // if (navigator.userAgent.indexOf('Firefox') !== -1) {
-          //   value = value + '<br>';
-          // }
           let trimmedValue = new String('');
           let i = value.length;
           while (i--) {
@@ -75,7 +76,7 @@ export default Component.extend({
           }
           value = trimmedValue;
           this.setProperties({ _value: value, value });
-        }, 200);
+        }, 500);
       };
 
       this.editor.on('interaction', updateValue);

diff --git a/app/components/widgets/forms/rich-text-link.js b/app/components/widgets/forms/rich-text-link.js
@@ -1,13 +1,13 @@
 import $ from 'jquery';
 import Component from '@ember/component';
-import { debounce } from '@ember/runloop';
 import { observer, computed } from '@ember/object';
 import { v4 } from 'ember-uuid';
 import { isTesting } from 'open-event-frontend/utils/testing';
 
 export default Component.extend({
 
-  editor: null,
+  editor      : null,
+  timeoutFunc : null,
 
   // Ensure any changes to the parser rules are set in the sanitizer @ services/sanitizer.js
   standardParserRules: {
@@ -37,6 +37,7 @@ export default Component.extend({
   valueObserver: observer('value', function() {
     if (this.editor && this.editor.getValue() !== this.value) {
       this.editor.setValue(this.value);
+      this.editor.focus(true);
     }
   }),
 
@@ -61,11 +62,11 @@ export default Component.extend({
       });
 
       const updateValue = () => {
-        debounce(this, () => {
+        if (this.timeoutFunc) {
+          clearTimeout(this.timeoutFunc);
+        }
+        this.timeoutFunc = setTimeout(() => {
           let value = String(this.editor.getValue()).replace(/(<br>)*$/g, '').replace(/&nbsp;/g, ' ');
-          // if (navigator.userAgent.indexOf('Firefox') !== -1) {
-          //   value = value + '<br>';
-          // }
           let trimmedValue = new String('');
           let i = value.length;
           while (i--) {
@@ -75,7 +76,7 @@ export default Component.extend({
           }
           value = trimmedValue;
           this.setProperties({ _value: value, value });
-        }, 200);
+        }, 500);
       };
 
       this.editor.on('interaction', updateValue);