Enhance Input Component with internalErrorExecution Prop for Flexible Validation

This update introduces the internalErrorExecution prop to the Input component, offering enhanced control over the timing of internal error validation, particularly for email inputs. By default set to onChangeOnBlur, this new optional property allows developers to specify if the internal email validation should trigger on blur events, providing greater flexibility in error handling and improving user experience by reducing the frequency of validation messages during input.

Author: Kubit

src/hooks/useInput/types/inputHook.ts

@@ -11,6 +11,7 @@ import { FormatNumber, InputState, InputTypeType, MASK_TYPE } from '@/components
 export type ParamsTypeInputHook = {
   ref?: ForwardedRef<HTMLInputElement | undefined>;
   errorExecution?: string;
+  internalErrorExecution?: string;
   keyValidation?: string;
   disabledArrowUpDownInputNumber?: boolean;
   disabledWheelMouse?: boolean;

src/hooks/useInput/useInput.ts

@@ -9,7 +9,11 @@ import {
 } from 'react';
 
 import { useInternalValidations } from '@/components/input/hooks';
-import { ERROR_EXECUTION, FormatNumber } from '@/components/input/types/input';
+import {
+  ERROR_EXECUTION,
+  FormatNumber,
+  INTERNAL_ERROR_EXECUTION,
+} from '@/components/input/types/input';
 import { InputTypeType } from '@/components/input/types/inputType';
 import {
   checkValidFormattedNumber,
@@ -200,7 +204,11 @@ export const useInput = (props: ParamsTypeInputHook): ReturnTypeInputHook => {
     const valueControlled = controlValue(eventValue);
 
     // check internal validations
-    if (props.type !== InputTypeType.DATE) {
+    if (
+      props.type !== InputTypeType.DATE &&
+      (props.internalErrorExecution === INTERNAL_ERROR_EXECUTION.ON_CHANGE ||
+        props.internalErrorExecution === INTERNAL_ERROR_EXECUTION.ON_CHANGE_ON_BLUR)
+    ) {
       checkInternalValidations(eventValue);
     }
 
@@ -226,6 +234,12 @@ export const useInput = (props: ParamsTypeInputHook): ReturnTypeInputHook => {
   };
 
   const handleBlurInternal: FocusEventHandler<HTMLInputElement> = event => {
+    if (
+      props.internalErrorExecution === INTERNAL_ERROR_EXECUTION.ON_BLUR ||
+      props.internalErrorExecution === INTERNAL_ERROR_EXECUTION.ON_CHANGE_ON_BLUR
+    ) {
+      checkInternalValidations(event.target.value);
+    }
     if (props.formatNumber) {
       // add thousand separator to the value
       event.target.value = addThousandSeparator(event.target.value, props.formatNumber);