FIO-9144 Fix cursor jump in number component

src/components/_classes/component/Component.js

@@ -1982,12 +1982,12 @@
   restoreCaretPosition() {
     if (this.root?.currentSelection) {
       if (this.refs.input?.length) {
-        const { selection, index } = this.root.currentSelection;
+        const { index } = this.root.currentSelection;
         let input = this.refs.input[index];
         const isInputRangeSelectable = (i) => /text|search|password|tel|url/i.test(i?.type || '');
         if (input) {
           if (isInputRangeSelectable(input)) {
-            input.setSelectionRange(...selection);
+            input.setSelectionRange(input.value.length, input.value.length);
           }
         }
         else {
@@ -2969,7 +2969,7 @@
 
   /**
    * Returns if the value (e.g. array) should be divided between several inputs
    * @returns {boolean}
    */
   isSingleInputValue() {
     return false;

test/unit/Number.unit.js

@@ -15,9 +15,9 @@ import {
   comp7,
   comp8,
   comp9,
-  comp10
+  comp10,
+  comp11
 } from './fixtures/number';
-import CurrencyComponent from "../../src/components/currency/Currency";
 
 describe('Number Component', () => {
   it('Should build an number component', () => {
@@ -471,6 +471,26 @@ describe('Number Component', () => {
     });
   });
 
+  it('Should maintain the correct caret (cursor) position when rendering value with thousands separators after restoreCaretPosition is called', (done) => { 
+    Formio.createForm(document.createElement('div'), comp11, {}).then((form) => {
+      const numberComponent = form.getComponent('number');
+      form.root.focusedComponent = numberComponent;
+      const numberElement = numberComponent.refs.input[0];
+      const inputEvent = new Event('input'); 
+
+      numberElement.value = 1234567;
+      numberElement.dispatchEvent(inputEvent);
+      // see https://formio.atlassian.net/browse/FIO-9144
+      // before the fix, the caret was moving back by one after being restored
+      numberComponent.restoreCaretPosition();
+      assert.equal(numberElement.value, '1,234,567');
+      // selectionStart (a.k.a cursor position) is 9 with the delimiters
+      // it would be 7 without them and 8 with the previous bug
+      assert.equal(numberElement.selectionStart, 9);
+      done();
+    }).catch(done);
+  });
+
   // it('Should add trailing zeros on blur, if decimal required', (done) => {
   //   const comp = _.cloneDeep(comp3);
   //

test/unit/fixtures/number/comp11.js

@@ -0,0 +1,18 @@
+export default {
+    components: [
+        {
+            label: 'Number',
+            mask: true,
+            tableView: false,
+            modalEdit: true,
+            multiple: true,
+            delimiter: ',',
+            requireDecimal: false,
+            inputFormat: 'plain',
+            truncateMultipleSpaces: false,
+            key: 'number',
+            type: 'number',
+            input: true
+        }
+    ]
+};

test/unit/fixtures/number/index.js

@@ -7,5 +7,6 @@ import comp6 from './comp6';
 import comp7 from './comp7';
 import comp8 from './comp8';
 import comp9 from './comp9';
-import comp10 from './comp10'
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10 };
+import comp10 from './comp10';
+import comp11 from './comp11';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8, comp9, comp10, comp11 };