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 <[email protected]> Co-authored-by: afc163 <[email protected]>
react-component · Jul 4, 2024 · e1f7727 · e1f7727
1 parent fdaef5a
commit e1f7727
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/src/hooks/useCursor.ts b/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);

diff --git a/tests/cursor.test.tsx b/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);
+    });
+  });
 });