Fixed inputCurrency with maxDecimals set to 0

Resolved an issue with the inputCurrency component when maxDecimals was set to 0. The component now correctly handles this case, ensuring accurate and expected behavior.

Author: Hector Arce De Las Heras

src/hooks/useInput/__tests__/useInput.test.ts

@@ -1,5 +1,5 @@
 import { act, renderHook } from '@testing-library/react-hooks';
-import { ChangeEvent } from 'react';
+import React, { ChangeEvent } from 'react';
 
 import * as validationsProvider from '@/provider/validations/validationsProvider';
 
@@ -9,7 +9,12 @@ describe('useInput Hook', () => {
   it('useInput - on internal change should call parent onChange', () => {
     const onChange = jest.fn();
     const formatNumber = { style: 'decimal' };
-    const { result } = renderHook(() => useInput({ onChange, formatNumber }));
+    const ref = React.createRef<HTMLInputElement | undefined>();
+    const currentValue = '123234';
+    const regex = new RegExp('^[0-9]*$');
+    const { result } = renderHook(() =>
+      useInput({ onChange, formatNumber, ref, currentValue, regex })
+    );
 
     act(() => {
       result.current.handleChangeInternal({
@@ -38,17 +43,19 @@ describe('useInput Hook', () => {
   });
   it('useInput - on internal blur should call parent onBlur', () => {
     const onBlur = jest.fn();
-    const { result } = renderHook(() => useInput({ onBlur }));
+    const formatNumber = { style: 'decimal' };
+    const { result } = renderHook(() => useInput({ onBlur, formatNumber }));
 
     act(() => {
       result.current.handleBlurInternal({
         target: {
-          value: 'value',
+          value: '12323',
         },
       } as React.FocusEvent<HTMLInputElement>);
     });
 
     expect(onBlur).toHaveBeenCalled();
+    expect(result.current.value).toBe('12,323');
   });
   it('useInput - on internal blur, if onError, errorExecution === onBlur and keyValidation should call parent onError', () => {
     jest.spyOn(validationsProvider, 'useValidations').mockImplementation(() => ({

src/hooks/useInput/types/inputHook.ts

@@ -29,6 +29,7 @@ export type ParamsTypeInputHook = {
   informationAssociated?: string;
   ignoreKeys?: string[];
   formatNumber?: FormatNumber;
+  locale?: string;
   onBlur?: FocusEventHandler<HTMLInputElement>;
   onChange?: ChangeEventHandler<HTMLInputElement>;
   onFocus?: FocusEventHandler<HTMLInputElement>;

src/hooks/useInput/useInput.ts

@@ -14,7 +14,9 @@ import { ERROR_EXECUTION, FormatNumber } from '@/components/input/types/input';
 import { InputTypeType } from '@/components/input/types/inputType';
 import {
   checkValidFormattedNumber,
+  convertDecimalSeparator,
   formatNumber,
+  getDecimalSeparator,
   getState,
   removeThousandSeparator,
 } from '@/components/input/utils';
@@ -28,7 +30,6 @@ import {
   getPosition,
   isArrowDownPressed,
   isArrowUpPressed,
-  isKeyEnterPressed,
   maxCountBetweenChars,
 } from '@/utils';
 import { matchInputValue } from '@/utils/maskUtility/mask.utility';
@@ -82,7 +83,7 @@ export const useInput = (props: ParamsTypeInputHook): ReturnTypeInputHook => {
     if (props.currentValue !== undefined) {
       let newValue = props.currentValue;
       // format with formatNumber configuration
-      if (firstRender.current && props.formatNumber) {
+      if (firstRender.current && props.formatNumber && !focus) {
         // add thousand separator to the value
         newValue = addThousandSeparator(String(props.currentValue), props.formatNumber);
       }
@@ -118,7 +119,7 @@ export const useInput = (props: ParamsTypeInputHook): ReturnTypeInputHook => {
 
     // truncate the value with maximun of decimals
     const truncateValue =
-      props.truncate && props.maxDecimals
+      props.truncate && props.maxDecimals !== null && props.maxDecimals !== undefined
         ? truncatedValue(String(limitedValue), props.maxDecimals)
         : limitedValue;
     handleSetValue(truncateValue);
@@ -127,9 +128,9 @@ export const useInput = (props: ParamsTypeInputHook): ReturnTypeInputHook => {
 
   // add thousand separator to the value
   const addThousandSeparator = (value: string, format: FormatNumber) => {
-    if (checkValidFormattedNumber(value, format.locale)) {
+    if (checkValidFormattedNumber(value, props.locale || format.locale)) {
       // remove existing thousand separator
-      const newValue = removeThousandSeparator(value, format.locale);
+      const newValue = removeThousandSeparator(value, props.locale || format.locale);
       // format value
       const formattedValue = formatNumber(Number(newValue), format);
       return formattedValue;
@@ -149,8 +150,12 @@ export const useInput = (props: ParamsTypeInputHook): ReturnTypeInputHook => {
       const newMaskedValue = matchInputValue(String(value), event.target.value, props.regex);
       event.target.value = newMaskedValue;
     }
-    if (props.truncate && props.maxDecimals) {
-      event.target.value = truncatedValue(String(event.target.value), props.maxDecimals);
+    if (props.truncate && props.maxDecimals !== null && props.maxDecimals !== undefined) {
+      event.target.value = truncatedValue(
+        String(event.target.value),
+        props.maxDecimals,
+        props.locale || props.formatNumber?.locale
+      );
     }
 
     // key validation
@@ -186,6 +191,20 @@ export const useInput = (props: ParamsTypeInputHook): ReturnTypeInputHook => {
   };
 
   const handleFocusInternal: FocusEventHandler<HTMLInputElement> = event => {
+    if (props.formatNumber) {
+      // remove thousand separator to the value
+      event.target.value = removeThousandSeparator(
+        event.target.value,
+        props.locale || props.formatNumber?.locale,
+        false
+      );
+      handleSetValue(event.target.value);
+    }
+    // transform the string value to a number format with dot as decimal separator to avoid errors
+    event.target.value = convertDecimalSeparator(
+      event.target.value,
+      getDecimalSeparator(props.locale || props.formatNumber?.locale)
+    );
     props.onFocus?.(event);
   };
 
@@ -207,12 +226,6 @@ export const useInput = (props: ParamsTypeInputHook): ReturnTypeInputHook => {
     ) {
       event.preventDefault();
     }
-    // Check if the input has a formatNumber ans press the enter key
-    if (props.formatNumber && isKeyEnterPressed(event.key) && inputRef.current) {
-      // add thousand separator to the value
-      const newValue = addThousandSeparator(String(value), props.formatNumber);
-      handleSetValue(newValue);
-    }
 
     const {
       key,

src/utils/cursorUtility/cursor.utility.test.ts

@@ -1,4 +1,4 @@
-import { BACKSPACE } from '@/constants';
+import { BACKSPACE, DELETE } from '@/constants';
 import { CursorType } from '@/types/type';
 
 import { getPosition } from './cursor.utility';
@@ -11,7 +11,10 @@ describe('Cursor', () => {
     const position = getPosition(BACKSPACE.key, VALUE, CURSOR);
     expect(position).toBe(-1);
   });
-
+  it('getPosition - should return 0', () => {
+    const position = getPosition(DELETE.key, VALUE, CURSOR);
+    expect(position).toBe(0);
+  });
   it('getPosition - should return 1', () => {
     const position = getPosition('t', VALUE, CURSOR);
     expect(position).toBe(1);