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/components/inputSearch/hooks/useInputSearch.ts

@@ -13,7 +13,12 @@ import {
 } from 'react';
 
 import { useInternalValidations } from '@/components/input/hooks';
-import { InputState, InputTypeType, InternalErrorType } from '@/components/input/types';
+import {
+  INTERNAL_ERROR_EXECUTION,
+  InputState,
+  InputTypeType,
+  InternalErrorType,
+} from '@/components/input/types';
 import { useCustomHeightFromChildrens, useMediaDevice } from '@/hooks';
 import { useInput } from '@/hooks/useInput/useInput';
 import {
@@ -55,6 +60,7 @@ type ParamsType = {
   maxLength?: number;
   searchFilterConfig?: SearchFilterConfig;
   caseSensitive?: boolean;
+  internalErrorExecution?: INTERNAL_ERROR_EXECUTION;
   onClick?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
   onIconClick?: React.MouseEventHandler<HTMLButtonElement>;
   executeInternalOpenOptions?: boolean;
@@ -239,6 +245,7 @@ export const useInputSearch = ({
 
   // Input Basic hook
   const { state, inputRef, handleBlurInternal, handleFocusInternal } = useInput({
+    internalErrorExecution: props.internalErrorExecution,
     ref: props.ref,
     disabled: props.disabled,
     error: props.error || internalErrors.length > 0,

src/components/inputSearch/inputSearch.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { InputTypeType } from '@/components/input';
+import { INTERNAL_ERROR_EXECUTION, InputTypeType } from '@/components/input';
 import { STYLES_NAME } from '@/constants';
 import { useMediaDevice, useStyles } from '@/hooks';
 import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
@@ -22,6 +22,7 @@ const InputSearchComponent = React.forwardRef(
       disableErrorInvalidOption = false,
       clearTextInputPopoverIconClick = true,
       highlightedOption = '',
+      internalErrorExecution = INTERNAL_ERROR_EXECUTION.ON_CHANGE_ON_BLUR,
       value,
       disabled,
       error,
@@ -73,6 +74,7 @@ const InputSearchComponent = React.forwardRef(
       handleInputPopoverKeyDown,
       handleOptionsListKeyDown,
     } = useInputSearch({
+      internalErrorExecution,
       open,
       type,
       options: optionList,
@@ -123,6 +125,7 @@ const InputSearchComponent = React.forwardRef(
         maxLength={maxLength}
         open={openOptions}
         optionList={optionsFiltered}
+        regex={regex}
         searchText={searchText}
         state={state}
         styles={styles}

src/components/inputSearch/inputSearchStandAlone.tsx

@@ -99,6 +99,7 @@ export const InputSearchStandAloneComponent = (
           (refInput as MutableRefObject<HTMLInputElement | null | undefined>)?.current,
           (refIcon as MutableRefObject<HTMLSpanElement | null | undefined>)?.current,
         ]}
+        regex={props.regex}
         searchText={props.searchText}
         state={props.state}
         styles={props.styles}

src/components/inputSearch/types/inputSearch.ts

@@ -3,13 +3,15 @@ import { ReactNode } from 'react';
 import { IElementOrIcon } from '@/components/elementOrIcon';
 import {
   IInputStandAlone,
+  INTERNAL_ERROR_EXECUTION,
   InputHelpMessageType,
   InputLabelType,
   InputState,
   InputStylesProps,
 } from '@/components/input/types';
 import { ListOptionsOptionType } from '@/components/listOptions';
 import { ILoader } from '@/components/loader/types';
+import { OptionSublabelType } from '@/components/option';
 import { IText } from '@/components/text/types';
 import { CustomTokenTypes, DeviceBreakpointsType } from '@/types';
 
@@ -84,8 +86,9 @@ export interface IPopoverSearchList {
   hasResultTextWrittenByUser?: boolean;
   state: InputState;
   styles: InputSearchStylesProps;
-  sublabel?: string;
+  sublabel?: OptionSublabelType;
   titleActionBottomSheet?: string;
+  regex?: string | RegExp;
   value?: string;
   caseSensitive?: boolean;
   // Functions
@@ -155,6 +158,7 @@ export interface IInputSearchStandAlone extends Omit<IInputStandAlone, propsToOm
   searchText?: string;
   value?: string;
   titleActionBottomSheet?: string;
+  regex?: string | RegExp;
   // listOptions
   caseSensitive?: boolean;
   listOptionsHeight: string;
@@ -168,7 +172,7 @@ export interface IInputSearchStandAlone extends Omit<IInputStandAlone, propsToOm
   hasResultTextWrittenByUser?: boolean;
   hasHighlightedOption?: boolean;
   // actionBottomSheet
-  sublabel?: string;
+  sublabel?: OptionSublabelType;
   closeIcon?: IElementOrIcon;
   icon?: IElementOrIcon;
   // input popover
@@ -225,6 +229,7 @@ export interface IInputSearch<V = undefined extends string ? unknown : string>
   searchFilterConfig?: SearchFilterConfig;
   disableErrorInvalidOption?: boolean;
   regex?: string | RegExp;
+  internalErrorExecution?: INTERNAL_ERROR_EXECUTION;
   onClick?: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;
   clearTextInputPopoverIconClick?: boolean;
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;