- should try to correct the value if old formatted value is provided …

…but the format prop changes
s-yadav · May 15, 2023 · 49a0003 · 49a0003
1 parent 9988c82
commit 49a0003
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-number-format",
   "description": "React component to format number in an input or as a text.",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "main": "dist/react-number-format.cjs.js",
   "module": "dist/react-number-format.es.js",
   "types": "types/index.d.ts",

diff --git a/src/utils.tsx b/src/utils.tsx
@@ -447,7 +447,7 @@ export function useInternalValues(
         formattedValue = format(numAsString);
       } else {
         numAsString = removeFormatting(value, undefined);
-        formattedValue = value;
+        formattedValue = format(numAsString);
       }
 
       return { formattedValue, numAsString };

diff --git a/test/library/input.spec.js b/test/library/input.spec.js
@@ -614,6 +614,16 @@ describe('NumberFormat as input', () => {
     expect(value.innerText).toEqual('1123234512');
   });
 
+  it('should try to correct the value if old formatted value is provided but the format prop changes', async () => {
+    const { input, rerender } = await render(
+      <NumericFormat value="$1,234" prefix="$" thousandSeparator />,
+    );
+    expect(input.value).toEqual('$1,234');
+
+    await rerender(<NumericFormat value="$1,234" prefix="Rs. " thousandSeparator />);
+    expect(input.value).toEqual('Rs. 1,234');
+  });
+
   describe('Test masking', () => {
     it('should allow mask as string', () => {
       const wrapper = mount(<PatternFormat format="#### #### ####" mask="_" />);