From 5e301544ac9a171bc65f09537f82a313ece0e77c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Selmir=20Ned=C5=BEibi?=
 <69647487+Contraboi@users.noreply.github.com>
Date: Thu, 22 Feb 2024 21:58:55 +0100
Subject: [PATCH] feat: introduce formatValueOnBlur flag (#339)

Co-authored-by: Selmir Nedzibi <Contraboi@users.noreply.github.com>
---
 src/components/CurrencyInput.tsx              |  3 +-
 src/components/CurrencyInputProps.ts          |  7 +++++
 .../__tests__/CurrencyInput-onBlur.spec.tsx   | 29 ++++++++++++++++---
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/components/CurrencyInput.tsx b/src/components/CurrencyInput.tsx
index 9d7f7df..e112937 100644
--- a/src/components/CurrencyInput.tsx
+++ b/src/components/CurrencyInput.tsx
@@ -58,6 +58,7 @@ export const CurrencyInput: FC<CurrencyInputProps> = forwardRef<
       onKeyDown,
       onKeyUp,
       transformRawValue,
+      formatValueOnBlur = true,
       ...props
     }: CurrencyInputProps,
     ref
@@ -231,7 +232,7 @@ export const CurrencyInput: FC<CurrencyInputProps> = forwardRef<
         value: newValue,
       });
 
-      if (onValueChange) {
+      if (onValueChange && formatValueOnBlur) {
         onValueChange(newValue, name, {
           float: numberValue,
           formatted: formattedValue,
diff --git a/src/components/CurrencyInputProps.ts b/src/components/CurrencyInputProps.ts
index 578a565..d69497a 100644
--- a/src/components/CurrencyInputProps.ts
+++ b/src/components/CurrencyInputProps.ts
@@ -183,5 +183,12 @@ export type CurrencyInputProps = Overwrite<
      * Transform the raw value form the input before parsing
      */
     transformRawValue?: (rawValue: string) => string;
+
+    /**
+     * When set to false, the formatValueOnBlur flag disables the application of the __onValueChange__ function
+     * specifically on blur events. If disabled or set to false, the onValueChange will not trigger on blur.
+     * Default = true
+     */
+     formatValueOnBlur?: boolean;
   }
 >;
diff --git a/src/components/__tests__/CurrencyInput-onBlur.spec.tsx b/src/components/__tests__/CurrencyInput-onBlur.spec.tsx
index f4ab7d8..a13c2ae 100644
--- a/src/components/__tests__/CurrencyInput-onBlur.spec.tsx
+++ b/src/components/__tests__/CurrencyInput-onBlur.spec.tsx
@@ -29,7 +29,7 @@ describe('<CurrencyInput/> onBlur', () => {
     userEvent.type(screen.getByRole('textbox'), '123');
     fireEvent.focusOut(screen.getByRole('textbox'));
 
-    expect(onBlurSpy).toBeCalled();
+    expect(onBlurSpy).toHaveBeenCalled();
 
     expect(onValueChangeSpy).toHaveBeenLastCalledWith('123.00', name, {
       float: 123,
@@ -40,13 +40,34 @@ describe('<CurrencyInput/> onBlur', () => {
     expect(screen.getByRole('textbox')).toHaveValue('$123.00');
   });
 
+  it('should call onBlur, but not onValueChange', () => {
+    render(
+      <CurrencyInput
+        name={name}
+        prefix="$"
+        onBlur={onBlurSpy}
+        onValueChange={onValueChangeSpy}
+        formatValueOnBlur={false}
+        decimalScale={2}
+      />
+    );
+
+    userEvent.type(screen.getByRole('textbox'), '123');
+    fireEvent.focusOut(screen.getByRole('textbox'));
+
+    expect(onBlurSpy).toHaveBeenCalled();
+
+    expect(onValueChangeSpy).toHaveBeenCalledTimes(3);
+    expect(screen.getByRole('textbox')).toHaveValue('$123.00');
+  });
+
   it('should call onBlur for 0', () => {
     render(<CurrencyInput name={name} prefix="$" onBlur={onBlurSpy} />);
 
     userEvent.type(screen.getByRole('textbox'), '0');
     fireEvent.focusOut(screen.getByRole('textbox'));
 
-    expect(onBlurSpy).toBeCalled();
+    expect(onBlurSpy).toHaveBeenCalled();
 
     expect(screen.getByRole('textbox')).toHaveValue('$0');
   });
@@ -56,7 +77,7 @@ describe('<CurrencyInput/> onBlur', () => {
 
     fireEvent.focusOut(screen.getByRole('textbox'));
 
-    expect(onBlurSpy).toBeCalled();
+    expect(onBlurSpy).toHaveBeenCalled();
 
     expect(screen.getByRole('textbox')).toHaveValue('');
   });
@@ -67,7 +88,7 @@ describe('<CurrencyInput/> onBlur', () => {
     userEvent.type(screen.getByRole('textbox'), '-');
     fireEvent.focusOut(screen.getByRole('textbox'));
 
-    expect(onBlurSpy).toBeCalled();
+    expect(onBlurSpy).toHaveBeenCalled();
 
     expect(screen.getByRole('textbox')).toHaveValue('');
   });