diff --git a/src/components/input/inputText/inputText.tsx b/src/components/input/inputText/inputText.tsx index f62776c50..4fc0bad5d 100644 --- a/src/components/input/inputText/inputText.tsx +++ b/src/components/input/inputText/inputText.tsx @@ -1,4 +1,3 @@ -import { useState, type ChangeEvent } from 'react'; import { InputContainer, type IInputComponentProps } from '../inputContainer'; import { useInputProps } from '../useInputProps'; @@ -6,18 +5,10 @@ export interface IInputTextProps extends IInputComponentProps {} export const InputText: React.FC = (props) => { const { containerProps, inputProps } = useInputProps(props); - const { value, onChange, ...otherInputProps } = inputProps; - - const [inputLength, setInputLength] = useState(0); - - const handleOnChange = (event: ChangeEvent) => { - setInputLength(event.target.value.length); - onChange?.(event); - }; return ( - - + + ); }; diff --git a/src/components/input/useInputProps.ts b/src/components/input/useInputProps.ts index eff4e8014..409c1997e 100644 --- a/src/components/input/useInputProps.ts +++ b/src/components/input/useInputProps.ts @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import { useId, type InputHTMLAttributes } from 'react'; +import { useId, useState, type ChangeEvent, type InputHTMLAttributes } from 'react'; import type { IInputComponentProps, IInputContainerProps } from './inputContainer'; export interface IUseInputPropsResult { @@ -30,12 +30,22 @@ export const useInputProps = (props: IInputComponentProps): IUseInputPropsResult id, className, maxLength, + onChange, ...inputElementProps } = props; + // Set a random generated id to the input field when id property is not defined to properly link the + // input with the label const randomId = useId(); const processedId = id ?? randomId; + const [inputLength, setInputLength] = useState(0); + + const handleOnChange = (event: ChangeEvent) => { + setInputLength(event.target.value.length); + onChange?.(event); + }; + const containerProps = { label, variant, @@ -46,6 +56,7 @@ export const useInputProps = (props: IInputComponentProps): IUseInputPropsResult id: processedId, maxLength, className, + inputLength, }; const inputClasses = classNames( @@ -58,6 +69,7 @@ export const useInputProps = (props: IInputComponentProps): IUseInputPropsResult id: processedId, disabled: isDisabled, className: inputClasses, + onChange: handleOnChange, maxLength, ...inputElementProps, };