Fix #711

src/numeric_format.tsx

@@ -330,17 +330,22 @@ export function useNumericFormat<BaseType = InputAttributes>(
     }
 
     // don't allow user to delete decimal separator when decimalScale and fixedDecimalScale is set
-    const { decimalSeparator } = getSeparators(props);
+    const { decimalSeparator, allowedDecimalSeparators } = getSeparators(props);
     if (
       key === 'Backspace' &&
-      value[(selectionStart as number) - 1] === decimalSeparator &&
+      value[selectionStart - 1] === decimalSeparator &&
       decimalScale &&
       fixedDecimalScale
     ) {
-      setCaretPosition(el, (selectionStart as number) - 1);
+      setCaretPosition(el, selectionStart - 1);
       e.preventDefault();
     }
 
+    // if user presses the allowed decimal separator before the separator, move the cursor after the separator
+    if (allowedDecimalSeparators?.includes(key) && value[selectionStart] === decimalSeparator) {
+      setCaretPosition(el, selectionStart + 1);
+    }
+
     const _thousandSeparator = thousandSeparator === true ? ',' : thousandSeparator;
 
     // move cursor when delete or backspace is pressed before/after thousand separator

test/library/keypress_and_caret.spec.js

@@ -87,6 +87,25 @@ describe('Test keypress and caret position changes', () => {
     expect(input.selectionStart).toEqual(2);
   });
 
+  it('should update caret position when any of the decimal separator is pressed just before the decimal separator #711', async () => {
+    const { input } = await render(
+      <NumericFormat
+        value={12}
+        allowedDecimalSeparators={[',', '.']}
+        decimalSeparator=","
+        thousandSeparator="."
+        decimalScale={3}
+        fixedDecimalScale
+      />,
+    );
+
+    simulateNativeKeyInput(input, ',', 2, 2);
+    expect(input.selectionStart).toEqual(3);
+
+    simulateNativeKeyInput(input, '.', 2, 2);
+    expect(input.selectionStart).toEqual(3);
+  });
+
   describe('Test character insertion', () => {
     it('should add any number properly when input is empty without format prop passed', () => {
       const wrapper = mount(<NumericFormat thousandSeparator={true} prefix={'$'} />);