feat: introduce formatValueOnBlur flag (#339)

Co-authored-by: Selmir Nedzibi <[email protected]>

Author: Contraboi

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,

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;
   }
 >;

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('');
   });