Fix #712

Author: s-yadav

src/number_format_base.tsx

@@ -76,9 +76,13 @@ export default function NumberFormatBase<BaseType = InputAttributes>(
     // if the formatted value is not synced to parent, or if the formatted value is different
     if (lastUpdatedValue.current === undefined || newFormattedValue !== lastUpdatedValue.current) {
       const input = focusedElm.current;
+
+      // formatting can remove some of the number chars, so we need to fine number string again
+      const _numAsString = removeFormatting(newFormattedValue, undefined);
+
       updateValue({
         formattedValue: newFormattedValue,
-        numAsString: numAsString,
+        numAsString: _numAsString,
         input,
         setCaretPosition: true,
         source: SourceType.props,
@@ -228,9 +232,12 @@ export default function NumberFormatBase<BaseType = InputAttributes>(
       ...changeRange,
       lastValue: formattedValue,
     };
-    const _numAsString = removeFormatting(inputValue, changeMeta);
+    let _numAsString = removeFormatting(inputValue, changeMeta);
     const _formattedValue = _format(_numAsString);
 
+    // formatting can remove some of the number chars, so we need to fine number string again
+    _numAsString = removeFormatting(_formattedValue, undefined);
+
     if (isAllowed && !isAllowed(getValueObject(_formattedValue, _numAsString))) {
       //reset the caret position
       const input = event.target as HTMLInputElement;

src/pattern_format.tsx

@@ -1,11 +1,5 @@
 import React from 'react';
-import {
-  PatternFormatProps,
-  InputAttributes,
-  ChangeMeta,
-  InternalNumberFormatBase,
-  NumberFormatBaseProps,
-} from './types';
+import { PatternFormatProps, InputAttributes, ChangeMeta, NumberFormatBaseProps } from './types';
 import {
   charIsNumber,
   getCaretPosInBoundary,
@@ -73,7 +67,9 @@ export function removeFormatting<BaseType = InputAttributes>(
     let str = '';
     for (let i = 0; i < value.length; i++) {
       if (isNumericSlot(i)) {
-        str += value[i];
+        if (charIsNumber(value[i])) {
+          str += value[i];
+        }
       } else if (value[i] !== format[i]) {
         // if there is a mismatch on the pattern, do plane number extract
         return extractNumbers(value);

test/library/input.spec.js

@@ -14,6 +14,9 @@ import {
   mount,
   shallow,
   getInputValue,
+  render,
+  wait,
+  simulateNativeKeyInput
 } from '../test_util';
 import PatternFormat, { usePatternFormat } from '../../src/pattern_format';
 import NumberFormatBase from '../../src/number_format_base';
@@ -553,6 +556,34 @@ describe('NumberFormat as input', () => {
     expect(spy).toHaveBeenCalled();
   });
 
+  it('should not give wrong value, when user enter more number than the given hash in PatternFormat #712', async () => {
+    const Component = () => {
+      const [value, setValue] = useState("1232345124");
+      return (
+        <div>
+          <PatternFormat
+            value={value}
+            format="(###) #### ###"
+            valueIsNumericString
+            mask="_"
+            onValueChange={(values) => {
+              setValue(values.value);
+            }}
+          />
+          <span data-testid="value">{value}</span>
+        </div>
+      )
+    }
+
+    const {input, view} = await render(<Component />);
+    simulateNativeKeyInput(input, '1', 1, 1);
+    await wait(100);
+
+    expect(input.value).toEqual('(112) 3234 512');
+    const value = await view.getByTestId('value');
+    expect(value.innerText).toEqual('1123234512');
+  })
+
   describe('Test masking', () => {
     it('should allow mask as string', () => {
       const wrapper = mount(<PatternFormat format="#### #### ####" mask="_" />);