diff --git a/src/numeric_format.tsx b/src/numeric_format.tsx index fadbe438..9a4cd7de 100644 --- a/src/numeric_format.tsx +++ b/src/numeric_format.tsx @@ -330,17 +330,22 @@ export function useNumericFormat( } // 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 diff --git a/test/library/keypress_and_caret.spec.js b/test/library/keypress_and_caret.spec.js index 528f8dcf..d369483c 100644 --- a/test/library/keypress_and_caret.spec.js +++ b/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( + , + ); + + 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();