Enhance Handling of Input Values in useInput Hook

This commit improves the handling of input values in the useInput hook, particularly in the context of formatting, validation, and control.

Changes include:

The truncateValue function in useInput.ts now takes into account the locale or formatNumber.locale in addition to limitedValue and maxDecimals. This enhances the truncation of the value with maximum decimals.
The handleChangeInternal function in useInput.ts has been refactored to use a new local variable eventValue instead of directly manipulating event.target.value. This improves code readability and maintainability.
The condition to assign valueControlled to event.target.value in useInput.ts has been modified to exclude InputTypeType.NUMBER. This improves the handling of input values for different types.
These changes enhance the functionality and readability of the useInput hook.

Author: Hector Arce De Las Heras

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

@@ -1,4 +1,5 @@
 import { limitValue } from '../helpers/limitValue';
+import { modifyInputNumberValue } from '../helpers/modifyInputNumberValue';
 
 describe('Input hook helpers', () => {
   test('LimitValue should return same value', () => {
@@ -19,3 +20,25 @@ describe('Input hook helpers', () => {
     expect(limitValue(value, '1', '5', undefined)).toBe('1');
   });
 });
+
+describe('modifyInputNumberValue', () => {
+  it('should return true if the value is less than min', () => {
+    const result = modifyInputNumberValue({ value: 5, min: 10 });
+    expect(result).toBe(true);
+  });
+
+  it('should return true if the value is greater than max', () => {
+    const result = modifyInputNumberValue({ value: 15, max: 10 });
+    expect(result).toBe(true);
+  });
+
+  it('should return true if the length of the value is greater than maxLength', () => {
+    const result = modifyInputNumberValue({ value: '12345', maxLength: 4 });
+    expect(result).toBe(true);
+  });
+
+  it('should return false if the value is within the min and max range and does not exceed maxLength', () => {
+    const result = modifyInputNumberValue({ value: 7, min: 5, max: 10, maxLength: 5 });
+    expect(result).toBe(false);
+  });
+});

src/hooks/useInput/helpers/modifyInputNumberValue.ts

@@ -0,0 +1,22 @@
+type ModifyInputNumberValueProps = {
+  value: string | number;
+  min?: number;
+  max?: number;
+  maxLength?: number;
+};
+
+export const modifyInputNumberValue = ({
+  value,
+  min,
+  max,
+  maxLength,
+}: ModifyInputNumberValueProps): boolean => {
+  if (min && Number(value) < min) {
+    return true;
+  } else if (max && Number(value) > max) {
+    return true;
+  } else if (maxLength && String(value).length > maxLength) {
+    return true;
+  }
+  return false;
+};

src/hooks/useInput/useInput.ts

@@ -35,6 +35,7 @@ import {
 import { matchInputValue } from '@/utils/maskUtility/mask.utility';
 
 import { limitValue } from './helpers/limitValue';
+import { modifyInputNumberValue } from './helpers/modifyInputNumberValue';
 import { ParamsTypeInputHook, ReturnTypeInputHook } from './types/inputHook';
 
 export const useInput = (props: ParamsTypeInputHook): ReturnTypeInputHook => {
@@ -128,17 +129,41 @@ export const useInput = (props: ParamsTypeInputHook): ReturnTypeInputHook => {
     }
   }, [value]);
 
+  const truncateFloatValue = value => {
+    if (value === '') {
+      return;
+    }
+    const hasMark = value.match(/[^a-zA-Z0-9]/g);
+
+    const isLastCharAMark =
+      hasMark &&
+      props.maxLength &&
+      value.length >= props.maxLength &&
+      value[props.maxLength - 1] === hasMark[0];
+
+    return isLastCharAMark && props.type === InputTypeType.NUMBER
+      ? value.replace(hasMark[0], '')
+      : value;
+  };
+
   const controlValue = value => {
     // control character limit
     const limitedValue = value && limitValue(value, props.min, props.max, props.maxLength);
 
     // truncate the value with maximun of decimals
     const truncateValue =
       props.truncate && props.maxDecimals !== null && props.maxDecimals !== undefined
-        ? truncatedValue(String(limitedValue), props.maxDecimals)
+        ? truncatedValue(
+            String(limitedValue),
+            props.maxDecimals,
+            props.locale || props.formatNumber?.locale
+          )
         : limitedValue;
-    handleSetValue(truncateValue);
-    return truncateValue;
+
+    const valueTruncated = truncateFloatValue(truncateValue);
+
+    handleSetValue(valueTruncated);
+    return valueTruncated;
   };
 
   // add thousand separator to the value
@@ -154,36 +179,42 @@ export const useInput = (props: ParamsTypeInputHook): ReturnTypeInputHook => {
   };
 
   const handleChangeInternal: React.ChangeEventHandler<HTMLInputElement> = event => {
+    let eventValue = event.target.value;
     // format value with the mask
     if (props.maskType) {
-      let newMaskedValue = cleanInputValue(event.target.value, props.maskType);
+      let newMaskedValue = cleanInputValue(eventValue, props.maskType);
       if (props.mask) {
         newMaskedValue = formatMask(newMaskedValue, props.mask);
       }
-      event.target.value = newMaskedValue;
+      eventValue = newMaskedValue;
     } else if (props.regex) {
-      const newMaskedValue = matchInputValue(String(value), event.target.value, props.regex);
-      event.target.value = newMaskedValue;
-    }
-    if (props.truncate && props.maxDecimals !== null && props.maxDecimals !== undefined) {
-      event.target.value = truncatedValue(
-        String(event.target.value),
-        props.maxDecimals,
-        props.locale || props.formatNumber?.locale
-      );
+      const newMaskedValue = matchInputValue(String(value), eventValue, props.regex);
+      eventValue = newMaskedValue;
     }
 
     // key validation
     if (props.errorExecution === ERROR_EXECUTION.ON_CHANGE && props.keyValidation) {
-      props.onError?.(!validationValue(props.keyValidation, event.target.value));
+      props.onError?.(!validationValue(props.keyValidation, eventValue));
     }
 
     // limit or truncate the value
-    const valueControlled = controlValue(event.target.value);
+    const valueControlled = controlValue(eventValue);
 
     // check internal validations
     if (props.type !== InputTypeType.DATE) {
-      checkInternalValidations(event.target.value);
+      checkInternalValidations(eventValue);
+    }
+
+    if (
+      modifyInputNumberValue({
+        value: eventValue,
+        min: props.min,
+        max: props.max,
+        maxLength: props.maxLength,
+      }) ||
+      props.type !== InputTypeType.NUMBER
+    ) {
+      event.target.value = valueControlled;
     }
 
     // value = previous value
@@ -192,10 +223,6 @@ export const useInput = (props: ParamsTypeInputHook): ReturnTypeInputHook => {
       return;
     }
 
-    if (props.type === InputTypeType.NUMBER) {
-      event.target.value = valueControlled;
-    }
-
     props.onChange?.(event);
   };
 
@@ -223,10 +250,14 @@ export const useInput = (props: ParamsTypeInputHook): ReturnTypeInputHook => {
       handleSetValue(event.target.value);
     }
     // transform the string value to a number format with dot as decimal separator to avoid errors
-    event.target.value = convertDecimalSeparator(
+    const decimalNumber = convertDecimalSeparator(
       event.target.value,
       getDecimalSeparator(props.locale || props.formatNumber?.locale)
     );
+
+    if (!isNaN(parseFloat(decimalNumber)) && isFinite(parseFloat(decimalNumber))) {
+      event.target.value = decimalNumber;
+    }
     props.onFocus?.(event);
     setFocus(true);
   };