Bug Fixes and Input Behavior Enhancement

This commit addresses two main issues. Firstly, it fixes an error with the label position in the icon when 'informationAssociated' and 'disabled' are used, and an error when pressing the button in 'informationAssociated'. The styles have been fixed and unnecessary 'onStructureBlur/focus' have been removed. Secondly, it introduces a change to the 'useInput' hook to prevent value changes when the mouse wheel is used on a number input, avoiding unexpected behavior for the user.

Author: Hector Arce De Las Heras

src/components/input/inputStandAlone.tsx

@@ -207,8 +207,6 @@ const InputStandAloneComponent = (
       rightExtraStyles={props.rightExtraStyles}
       topContent={buildTopContent()}
       topExtraStyles={props.topExtraStyles}
-      onBlurStructure={props.onBlurStructure}
-      onFocusStructure={props.onFocusStructure}
     />
   );
 };

src/components/input/inputUnControlled.tsx

@@ -26,6 +26,7 @@ const InputUnControlledComponent = <V extends string | unknown>(
     ignoreKeys,
     formatNumber,
     locale,
+    disabledWheelMouse = true,
     onBlur,
     onChange,
     onFocus,
@@ -46,8 +47,6 @@ const InputUnControlledComponent = <V extends string | unknown>(
     handleBlurInternal,
     handleFocusInternal,
     handleKeyDownInternal,
-    handleBlurStructure,
-    handleFocusStructure,
   } = useInput({
     ref,
     errorExecution,
@@ -69,6 +68,7 @@ const InputUnControlledComponent = <V extends string | unknown>(
     ignoreKeys,
     formatNumber,
     locale,
+    disabledWheelMouse,
     onBlur,
     onChange,
     onFocus,
@@ -92,10 +92,8 @@ const InputUnControlledComponent = <V extends string | unknown>(
       type={inputType}
       value={value}
       onBlur={handleBlurInternal}
-      onBlurStructure={handleBlurStructure}
       onChange={handleChangeInternal}
       onFocus={handleFocusInternal}
-      onFocusStructure={handleFocusStructure}
       onKeyDown={handleKeyDownInternal}
     />
   );

src/components/input/stories/argtypes.ts

@@ -153,6 +153,18 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.MODIFIERS,
       },
     },
+    disabledWheelMouse: {
+      description: 'Disable wheel mouse',
+      control: { type: 'boolean' },
+      type: { name: 'boolean' },
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: true },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
     autoCapitalize: {
       description: 'Specifies whether the value of the input should be automatically capitalized',
       control: { type: 'select' },

src/components/input/types/input.ts

@@ -351,6 +351,7 @@ export type IInputStandAlone = IInputComponents & {
     | 'characters'
     | AUTOCAPITALIZE_TYPE;
   disabledCopyAndPaste?: boolean;
+  disabledWheelMouse?: boolean;
   maxLength?: number;
   minLength?: number;
   min?: number;
@@ -381,8 +382,6 @@ export type IInputStandAlone = IInputComponents & {
   onChange?: React.ChangeEventHandler<HTMLInputElement>;
   onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
   onClick?: React.MouseEventHandler<HTMLInputElement>;
-  onFocusStructure?: React.FocusEventHandler<HTMLDivElement>;
-  onBlurStructure?: React.FocusEventHandler<HTMLDivElement>;
 };
 
 type propsToOmit =
@@ -404,7 +403,7 @@ export interface IInputControlled<V = undefined extends string ? unknown : strin
 
 export type IInputUnControlled<V = undefined extends string ? unknown : string> = Omit<
   IInputControlled<V>,
-  'value' | 'state' | 'onFocusStructure' | 'onBlurStructure'
+  'value' | 'state'
 > & {
   // modifiers
   error?: boolean;

src/components/inputCounter/inputCounter.tsx

@@ -53,8 +53,6 @@ const InputCounterComponent = React.forwardRef(
       handleBlurInternal,
       handleFocusInternal,
       handleKeyDownInternal,
-      handleBlurStructure,
-      handleFocusStructure,
     } = useInput({
       ref,
       errorExecution,
@@ -96,10 +94,8 @@ const InputCounterComponent = React.forwardRef(
         type={type}
         value={value}
         onBlur={handleBlurInternal}
-        onBlurStructure={handleBlurStructure}
         onChange={handleChangeInternal}
         onFocus={handleFocusInternal}
-        onFocusStructure={handleFocusStructure}
         onKeyDown={handleKeyDownInternal}
       />
     );

src/components/inputCurrency/inputCurrency.tsx

@@ -33,6 +33,7 @@ const InputCurrencyComponent = React.forwardRef(
       regex,
       formatNumber,
       locale,
+      disabledWheelMouse = true,
       onBlur,
       onChange,
       onFocus,
@@ -63,8 +64,6 @@ const InputCurrencyComponent = React.forwardRef(
       handleBlurInternal,
       handleFocusInternal,
       handleKeyDownInternal,
-      handleBlurStructure,
-      handleFocusStructure,
     } = useInput({
       ref,
       errorExecution,
@@ -87,6 +86,7 @@ const InputCurrencyComponent = React.forwardRef(
       regex,
       formatNumber,
       locale,
+      disabledWheelMouse,
       onBlur,
       onChange,
       onFocus,
@@ -111,10 +111,8 @@ const InputCurrencyComponent = React.forwardRef(
         type={inputCurrencyType}
         value={value}
         onBlur={handleBlurInternal}
-        onBlurStructure={handleBlurStructure}
         onChange={handleChangeInternal}
         onFocus={handleFocusInternal}
-        onFocusStructure={handleFocusStructure}
         onKeyDown={handleKeyDownInternal}
       />
     );

src/components/inputDate/hooks/useInputDate.ts

@@ -419,8 +419,6 @@ export const useInputDate = ({
     handleFocusInternal,
     handleKeyDownInternal,
     handleSetValue,
-    handleBlurStructure,
-    handleFocusStructure,
   } = useInput({
     ref,
     errorExecution,
@@ -505,7 +503,5 @@ export const useInputDate = ({
     handleFocusInternal,
     handleKeyDownInternal,
     handleSetValue,
-    handleBlurStructure,
-    handleFocusStructure,
   };
 };

src/components/inputDate/inputDate.tsx

@@ -72,8 +72,6 @@ const InputDateComponent = React.forwardRef(
       handleFocusInternal,
       handleKeyDownInternal,
       handleChangeInternal,
-      handleBlurStructure,
-      handleFocusStructure,
     } = useInputDate({
       ref,
       format,
@@ -136,13 +134,11 @@ const InputDateComponent = React.forwardRef(
         type={type}
         value={value}
         onBlur={handleBlurInternal}
-        onBlurStructure={handleBlurStructure}
         onCalendarOpen={handleOpenCalendar}
         onChange={handleChangeInternal}
         onClick={handleClickInput}
         onDateChange={handlePickCalendarDate}
         onFocus={handleFocusInternal}
-        onFocusStructure={handleFocusStructure}
         onKeyDown={handleKeyDownInternal}
       />
     );

src/components/inputDropdown/hooks/useInputDropdown.ts

@@ -84,8 +84,6 @@ type ReturnHookType = {
   state: InputState;
   handleFocusInternal: FocusEventHandler<HTMLInputElement>;
   handleInputPopoverChange: ChangeEventHandler<HTMLInputElement>;
-  handleBlurStructure: FocusEventHandler<HTMLDivElement>;
-  handleFocusStructure: FocusEventHandler<HTMLDivElement>;
 };
 
 export const useInputDropdown = (props: ParamsType): ReturnHookType => {
@@ -141,17 +139,16 @@ export const useInputDropdown = (props: ParamsType): ReturnHookType => {
   };
 
   // Input Basic hook
-  const { state, inputRef, handleFocusInternal, handleBlurStructure, handleFocusStructure } =
-    useInput({
-      disabled: props.disabled,
-      error: props.error || internalErrors.length > 0,
-      // need for update the state
-      currentValue: searchText,
-      informationAssociated: props.informationAssociated,
-      onFocus: props.onFocus,
-      onBlur: handleInputBlur,
-      onInternalErrors: props.onInternalErrors,
-    });
+  const { state, inputRef, handleFocusInternal } = useInput({
+    disabled: props.disabled,
+    error: props.error || internalErrors.length > 0,
+    // need for update the state
+    currentValue: searchText,
+    informationAssociated: props.informationAssociated,
+    onFocus: props.onFocus,
+    onBlur: handleInputBlur,
+    onInternalErrors: props.onInternalErrors,
+  });
 
   const useActionBottomSheet = useMemo(
     () => props.styles?.[state]?.useActionBottomSheet?.[device],
@@ -382,7 +379,5 @@ export const useInputDropdown = (props: ParamsType): ReturnHookType => {
     listOptionsHeight,
     handleFocusInternal,
     handleInputPopoverChange,
-    handleBlurStructure,
-    handleFocusStructure,
   };
 };

src/components/inputDropdown/inputDropdown.tsx

@@ -64,8 +64,6 @@ const InputDropdownComponent = React.forwardRef(
       handleFocusInternal,
       handleInputPopoverChange,
       handleInputPopoverKeyDown,
-      handleBlurStructure,
-      handleFocusStructure,
     } = useInputDropdown({
       open,
       optionList,
@@ -106,11 +104,9 @@ const InputDropdownComponent = React.forwardRef(
         type={type}
         value={valueSearchSelected}
         onBlur={handleInputBlur}
-        onBlurStructure={handleBlurStructure}
         onChange={handleChangeInputDropdown}
         onClick={handleClickInputDropdown}
         onFocus={handleFocusInternal}
-        onFocusStructure={handleFocusStructure}
         onInputPopoverChange={handleInputPopoverChange}
         onInputPopoverIconClick={handleInputPopoverIconClick}
         onInputPopoverKeyDown={handleInputPopoverKeyDown}