- Fix key press after selection over masked area.

#839

Author: s-yadav

src/number_format_base.tsx

@@ -319,9 +319,11 @@ export default function NumberFormatBase<BaseType = InputAttributes>(
       endOffset = 1;
     }
 
+    const isArrowKey = key === 'ArrowLeft' || key === 'ArrowRight';
+
     //if expectedCaretPosition is not set it means we don't want to Handle keyDown
     // also if multiple characters are selected don't handle
-    if (expectedCaretPosition === undefined || selectionStart !== selectionEnd) {
+    if (expectedCaretPosition === undefined || (selectionStart !== selectionEnd && !isArrowKey)) {
       onKeyDown(e);
       // keep information of what was the caret position before keyDown
       // set it after onKeyDown, in case parent updates the position manually
@@ -331,7 +333,7 @@ export default function NumberFormatBase<BaseType = InputAttributes>(
 
     let newCaretPosition = expectedCaretPosition;
 
-    if (key === 'ArrowLeft' || key === 'ArrowRight') {
+    if (isArrowKey) {
       const direction = key === 'ArrowLeft' ? 'left' : 'right';
       newCaretPosition = correctCaretPosition(value, expectedCaretPosition, direction);
       // arrow left or right only moves the caret, so no need to handle the event, if we are handling it manually

test/library/keypress_and_caret.spec.jsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import NumericFormat from '../../src/numeric_format';
 import PatternFormat from '../../src/pattern_format';
 import NumberFormatBase from '../../src/number_format_base';
-import { waitFor } from '@testing-library/react';
+import { waitFor, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import {
@@ -689,5 +689,12 @@ describe('Test keypress and caret position changes', () => {
       input.setSelectionRange(0, 0);
       waitFor(() => expect(input.selectionStart).toEqual(1));
     });
+
+    it('should correct caret position after user select masked area and then clicks or press key #839', async () => {
+      const { input } = await render(<PatternFormat format="##/##/####" value="1" mask="_" />);
+      input.setSelectionRange(3, 7);
+      fireEvent.keyDown(input, { key: 'ArrowRight' });
+      expect(input.selectionEnd).toEqual(1);
+    });
   });
 });