fix: cursor position when formatter appends characters on empty string (#652)

* fix: cursor position when formatter appends characters on empty string

* revert: fix

* test(useCursor): position caret before appended characters

* fix cursor position when formatter appends characters on empty string

* Update tests/cursor.test.tsx

* Update tests/cursor.test.tsx

---------

Co-authored-by: Pierluigi Giancola <pierluigi.giancola@moltiplygroup.com>
Co-authored-by: afc163 <afc163@gmail.com>

Author: 3 people

src/hooks/useCursor.ts

@@ -50,10 +50,10 @@ export default function useCursor(
 
         let startPos = value.length;
 
-        if (value.endsWith(afterTxt)) {
-          startPos = value.length - selectionRef.current.afterTxt.length;
-        } else if (value.startsWith(beforeTxt)) {
+        if (value.startsWith(beforeTxt)) {
           startPos = beforeTxt.length;
+        } else if (value.endsWith(afterTxt)) {
+          startPos = value.length - selectionRef.current.afterTxt.length;
         } else {
           const beforeLastChar = beforeTxt[start - 1];
           const newIndex = value.indexOf(beforeLastChar, start - 1);

tests/cursor.test.tsx

@@ -107,4 +107,14 @@ describe('InputNumber.Cursor', () => {
       });
     });
   });
+
+  describe('append string', () => {
+    it('position caret before appended characters', () => {
+      const { container } = render(<InputNumber formatter={(value) => `${value}%`} parser={(value) => value.replace('%', '')} />);
+      const input = container.querySelector('input');
+      fireEvent.focus(input);
+      fireEvent.change(input,{ target: { value: '5' } });
+      expect(cursorInput(input)).toEqual(1);
+    });
+  });
 });