fix: prevent cursor jumping when press delete key (#155)

Author: cchanxzy

src/components/CurrencyInput.tsx

@@ -123,8 +123,8 @@ export const CurrencyInput: FC<CurrencyInputProps> = forwardRef<
       /* istanbul ignore next */
       if (selectionStart !== undefined && selectionStart !== null) {
         // Prevent cursor jumping
-        const cursor = selectionStart + (formattedValue.length - value.length) || 1;
-        setCursor(cursor);
+        const newCursor = selectionStart + (formattedValue.length - value.length) || 1;
+        setCursor(newCursor);
       }
 
       setStateValue(formattedValue);
@@ -250,7 +250,7 @@ export const CurrencyInput: FC<CurrencyInputProps> = forwardRef<
       ) {
         inputRef.current.setSelectionRange(cursor, cursor);
       }
-    }, [cursor, inputRef, dirty]);
+    }, [stateValue, cursor, inputRef, dirty]);
 
     const formattedPropsValue =
       userValue !== undefined

src/components/__tests__/CurrencyInput-backspace.spec.tsx

@@ -56,4 +56,22 @@ describe('<CurrencyInput/> backspace', () => {
     userEvent.type(screen.getByRole('textbox'), '{backspace}');
     expect(screen.getByRole('textbox')).toHaveValue('');
   });
+
+  it('should handle Del key without moving cursor', () => {
+    render(
+      <CurrencyInput
+        defaultValue=""
+        onValueChange={onValueChangeSpy}
+        groupSeparator={','}
+        decimalScale={2}
+        prefix="$"
+      />
+    );
+
+    userEvent.type(screen.getByRole('textbox'), '123456789');
+    expect(screen.getByRole('textbox')).toHaveValue('$123,456,789');
+
+    userEvent.type(screen.getByRole('textbox'), '{arrowleft}{arrowleft}{arrowleft}{del}');
+    expect(screen.getByRole('textbox')).toHaveValue('$12,345,689');
+  });
 });