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/input/hooks/useInternalValidations.tsx

@@ -27,7 +27,7 @@ export const useInternalValidations = (
     }
     // Min length validation
     const minLengthValidation = () => {
-      if (value && type === InputTypeType.TEXT && minLength && value.length < minLength) {
+      if (type === InputTypeType.TEXT && minLength && value.length < minLength) {
         errors.push(InternalErrorType.INVALID_MIN_LENGTH);
       }
     };

src/components/input/inputStandAlone.tsx

@@ -31,7 +31,7 @@ import {
   LABEL_TYPE,
   MultipleRef,
 } from './types';
-import { buildAriaLabelledBy, hasError, isDisabled } from './utils';
+import { buildAriaDescribedBy, buildAriaLabelledBy, hasError, isDisabled } from './utils';
 
 const InputStandAloneComponent = (
   {
@@ -77,15 +77,19 @@ const InputStandAloneComponent = (
         aria-haspopup={props['aria-haspopup']}
         aria-invalid={hasError(state)}
         aria-labelledby={buildAriaLabelledBy({
-          extraAriaLabelledBy,
           labelId,
+          extraAriaLabelledBy,
           helpMessage: helpMessage?.content as string,
           helpMessageId,
-          errorMessage: errorMessage?.content,
+          state: state,
+        })}
+        {...ariaProps}
+        aria-describedby={buildAriaDescribedBy({
+          ariaDescribedBy: props['aria-describedby'],
+          errorMessage: errorMessage?.content as string,
           errorMessageId,
           state,
         })}
-        {...ariaProps}
         autoCapitalize={autoCapitalize}
         autoComplete={autocomplete}
         cursorPointer={styles?.[state]?.inputContainer?.cursor}
@@ -149,7 +153,9 @@ const InputStandAloneComponent = (
         disabled={isDisabled(state)}
         icon={{ dataTestId: `${props.dataTestId}Icon`, ...props.icon }}
         iconPosition={props.iconPosition}
+        leftIcon={props.leftIcon}
         loading={props.loading}
+        rightIcon={props.rightIcon}
         state={state}
         styles={styles?.[state]}
       />

src/components/input/inputUnControlled.tsx

@@ -3,15 +3,17 @@ import * as React from 'react';
 import { useInput } from '@/hooks/useInput/useInput';
 
 import { InputControlled } from './inputControlled';
-import { IInputUnControlled, InputTypeType } from './types';
+import { IInputUnControlled, INTERNAL_ERROR_EXECUTION, InputTypeType } from './types';
 
 const InputUnControlledComponent = <V extends string | unknown>(
   {
     type = InputTypeType.TEXT,
     truncate = false,
+    internalErrorExecution = INTERNAL_ERROR_EXECUTION.ON_CHANGE_ON_BLUR,
+    disabledArrowUpDownInputNumber = false,
+    disabledWheelMouse = true,
     errorExecution,
     keyValidation,
-    disabledArrowUpDownInputNumber = false,
     min,
     max,
     maxLength,
@@ -26,7 +28,6 @@ const InputUnControlledComponent = <V extends string | unknown>(
     ignoreKeys,
     formatNumber,
     locale,
-    disabledWheelMouse = true,
     onBlur,
     onChange,
     onFocus,
@@ -50,6 +51,7 @@ const InputUnControlledComponent = <V extends string | unknown>(
   } = useInput({
     ref,
     errorExecution,
+    internalErrorExecution,
     keyValidation,
     disabledArrowUpDownInputNumber,
     max,

src/components/input/stories/argtypes.ts

@@ -3,7 +3,12 @@ import { IThemeObjectVariants } from '@/designSystem/themesObject';
 import { ArgTypesReturn, ROLES } from '@/types';
 import { AriaLiveOptionType } from '@/types/ariaLiveOption';
 
-import { AUTOCAPITALIZE_TYPE, ERROR_EXECUTION, MASK_TYPE } from '../types/input';
+import {
+  AUTOCAPITALIZE_TYPE,
+  ERROR_EXECUTION,
+  INTERNAL_ERROR_EXECUTION,
+  MASK_TYPE,
+} from '../types/input';
 import { InputIconPosition } from '../types/inputTheme';
 import { InputTypeType } from '../types/inputType';
 
@@ -324,6 +329,20 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.MODIFIERS,
       },
     },
+    internalErrorExecution: {
+      control: { type: 'select' },
+      description: 'When internal error handling occurs',
+      options: ['onChange', 'onBlur', 'onChangeOnBlur'],
+      type: { name: 'string' },
+      table: {
+        type: {
+          summary: 'INTERNAL_ERROR_EXECUTION',
+          detail: Object.keys(INTERNAL_ERROR_EXECUTION).join(', '),
+        },
+        defaultValue: { summary: INTERNAL_ERROR_EXECUTION.ON_CHANGE_ON_BLUR },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
     errorMessage: {
       description:
         'Object with error message properties. In the error state, the field is accompanied by a description of the problem to help resolve it.',

src/components/input/types/input.ts

@@ -70,6 +70,12 @@ export enum ERROR_EXECUTION {
   ON_BLUR = 'onBlur',
 }
 
+export enum INTERNAL_ERROR_EXECUTION {
+  ON_CHANGE = 'onChange',
+  ON_BLUR = 'onBlur',
+  ON_CHANGE_ON_BLUR = 'onChangeOnBlur',
+}
+
 export enum AUTOCAPITALIZE_TYPE {
   OFF = 'off',
   NONE = 'none',
@@ -421,6 +427,7 @@ export type IInputUnControlled<V = undefined extends string ? unknown : string>
   disabled?: boolean;
   value?: string | number;
   errorExecution?: ERROR_EXECUTION;
+  internalErrorExecution?: INTERNAL_ERROR_EXECUTION;
   keyValidation?: string;
   regex?: string | RegExp;
   // functions

src/components/input/utils/aria.utils.ts

@@ -15,18 +15,41 @@ export const buildAriaLabelledBy = ({
   helpMessage?: React.ReactNode;
   helpMessageId?: string;
   errorMessage?: string;
-  errorMessageId: string;
+  errorMessageId?: string;
   state?: InputState;
 }): string => {
   let res = labelId;
   if (extraAriaLabelledBy) {
     res += ` ${extraAriaLabelledBy}`;
   }
-  if (errorMessage && hasError(state)) {
+  if (errorMessageId && errorMessage && hasError(state)) {
     res += ` ${errorMessageId}`;
   }
-  if (helpMessage) {
+  if (helpMessageId && helpMessage) {
     res += ` ${helpMessageId}`;
   }
   return res;
 };
+
+export const buildAriaDescribedBy = ({
+  ariaDescribedBy,
+  errorMessage,
+  errorMessageId,
+  state,
+}: {
+  ariaDescribedBy?: string;
+  errorMessage?: string;
+  errorMessageId?: string;
+  state?: InputState;
+}): string | undefined => {
+  if (!ariaDescribedBy && !errorMessage) return;
+
+  let res: string = '';
+  if (ariaDescribedBy) {
+    res += ` ${ariaDescribedBy}`;
+  }
+  if (errorMessageId && errorMessage && hasError(state)) {
+    res += ` ${errorMessageId}`;
+  }
+  return res;
+};

src/components/inputCounter/inputCounter.tsx

@@ -4,7 +4,7 @@ import { STYLES_NAME } from '@/constants';
 import { useId, useInput, useStyles } from '@/hooks';
 import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
 
-import { InputTypeType } from '../input/types';
+import { INTERNAL_ERROR_EXECUTION, InputTypeType } from '../input/types';
 import { InputCounterStandAlone } from './inputCounterStandAlone';
 import { IInputCounter, IInputCounterStandAlone, InputCounterStylesProps } from './types';
 
@@ -13,6 +13,7 @@ const InputCounterComponent = React.forwardRef(
     {
       type = InputTypeType.TEXT,
       truncate = false,
+      internalErrorExecution = INTERNAL_ERROR_EXECUTION.ON_CHANGE_ON_BLUR,
       errorExecution,
       keyValidation,
       min,
@@ -57,6 +58,7 @@ const InputCounterComponent = React.forwardRef(
     } = useInput({
       ref,
       errorExecution,
+      internalErrorExecution,
       keyValidation,
       max,
       min,

src/components/inputCounter/types/inputCounter.ts

@@ -1,4 +1,4 @@
-import { ERROR_EXECUTION, IInputStandAlone } from '@/components/input';
+import { ERROR_EXECUTION, IInputStandAlone, INTERNAL_ERROR_EXECUTION } from '@/components/input';
 import { ITextCountControlled } from '@/components/textCount';
 import { CustomTokenTypes } from '@/types';
 
@@ -36,6 +36,7 @@ export interface IInputCounter<V = undefined extends string ? unknown : string>
   error?: boolean;
   disabled?: boolean;
   errorExecution?: ERROR_EXECUTION;
+  internalErrorExecution?: INTERNAL_ERROR_EXECUTION;
   keyValidation?: string;
   regex?: string | RegExp;
   onInternalErrors?: (errors: string[]) => void;

src/components/inputCurrency/__tests__/inputCurrency.test.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import { axe } from 'jest-axe';
 
-import { FormatNumber, InputContentPosition, InputState } from '@/components/input/types';
+import { InputContentPosition, InputState } from '@/components/input/types';
 import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
 import { POSITIONS } from '@/types/positions';
 
@@ -28,7 +28,7 @@ const format = {
   style: 'decimal',
   maximumFractionDigits: 3,
   minimumFractionDigits: 1,
-} as FormatNumber;
+};
 
 describe('New Input Currency Component', () => {
   test('Should render InputCurrency component', async () => {

src/components/inputCurrency/inputCurrency.tsx

@@ -5,7 +5,7 @@ import { useStyles } from '@/hooks/useStyles/useStyles';
 import { ErrorBoundary, FallbackComponent } from '@/provider/errorBoundary';
 
 // helpers
-import { InputTypeType } from '../input';
+import { INTERNAL_ERROR_EXECUTION, InputTypeType } from '../input';
 import { InputCurrencyStandAlone } from './inputCurrencyStandAlone';
 import { IInputCurrency, IInputCurrencyStandAlone, InputCurrencyStylesProps } from './types';
 
@@ -17,6 +17,11 @@ const InputCurrencyComponent = React.forwardRef(
       maxDecimals = 2,
       truncate = true,
       min = 0,
+      internalErrorExecution = INTERNAL_ERROR_EXECUTION.ON_CHANGE_ON_BLUR,
+      disabledArrowUpDownInputNumber = false,
+      ignoreKeys = ['+', '-', 'e'],
+      disabledWheelMouse = true,
+      type = InputTypeType.NUMBER,
       max,
       errorExecution,
       keyValidation,
@@ -25,32 +30,25 @@ const InputCurrencyComponent = React.forwardRef(
       mask,
       maskType,
       disabled,
-      disabledArrowUpDownInputNumber = false,
       error,
       value: currentValue,
       informationAssociatedValue,
-      ignoreKeys = ['+', '-', 'e'],
       regex,
       formatNumber,
       locale,
-      disabledWheelMouse = true,
+      variant,
       onBlur,
       onChange,
       onFocus,
       onKeyDown,
       onError,
       onInternalErrors,
       ctv,
-      type = InputTypeType.NUMBER,
       ...props
     }: IInputCurrency<V>,
     ref: React.ForwardedRef<HTMLInputElement | undefined>
   ): JSX.Element => {
-    const styles = useStyles<InputCurrencyStylesProps, V>(
-      INPUT_CURRENCY_STYLES,
-      props.variant,
-      ctv
-    );
+    const styles = useStyles<InputCurrencyStylesProps, V>(INPUT_CURRENCY_STYLES, variant, ctv);
     const inputCurrencyType = formatNumber ? InputTypeType.TEXT : type;
     // if formatNumber is true (input element of type text), min and maxDecimals should be undefined because it will be handled by the formatNumber function
     const inputCurrencyMin = formatNumber ? undefined : min;
@@ -67,6 +65,7 @@ const InputCurrencyComponent = React.forwardRef(
     } = useInput({
       ref,
       errorExecution,
+      internalErrorExecution,
       keyValidation,
       max,
       min: inputCurrencyMin,