Untitled

import React, { useEffect, useState } from 'react';
import { InputTextarea } from 'primereact/inputtextarea';
import PrimeWrapper from '../primeWrapper/primewrapper';
import PropTypes from 'prop-types';
import classNames from 'classnames';

const PrimeInputTextarea = (props) => {
    const [inputValue, setInputValue] = useState(props.value || '');
    const [charsRemaining, setCharsRemaining] = useState(props.maxLength || 0);
    const [charsEntered, setCharsEntered] = useState(0);

    const calculateLength = props.calculateLength || ((str) => str.length);

    useEffect(() => {
        const initialText = props.value || '';
        const [text, remainingChars] = getStateValues(initialText);
        setInputValue(initialText); // Ensure state reflects initial value
        setCharsRemaining(remainingChars);
        setCharsEntered(text.length);
    }, [props.value]);

    const getStateValues = (text) => {
        const remainingLength = props.maxLength - calculateLength(text);
        if (remainingLength < 0 && props.truncate) {
            const truncatedText = text.slice(0, props.maxLength);
            return [truncatedText, 0]; // Return truncated text and zero remaining chars
        }
        return [text, remainingLength];
    };

    const handleInputChange = (event) => {
        const value = props.autoCapitalize ? event.target.value.toUpperCase() : event.target.value;
        const [text, remainingChars] = getStateValues(value);
        setInputValue(text); // Update component's own state
        setCharsRemaining(remainingChars);
        setCharsEntered(text.length);
        props.onChange && props.onChange({ ...event, target: { ...event.target, value: text } });
    };

    // Other methods remain the same...

    return (
        (props.showif !== undefined ? props.showif : true) && (
            <span>
                <div>
                    <label className={props.labelClassName}>{props.evalLabel(props)}</label>
                </div>
                <span>
                    <InputTextarea
                        id={props.id}
                        className={props.className}
                        name={props.name}
                        value={inputValue} // Use local state for controlled component
                        onChange={handleInputChange}
                        onInput={props.onInput}
                        onBlur={props.onBlur}
                        onFocus={props.onFocus}
                        disabled={props.evalBool(props, 'disabled')}
                        readOnly={props.readOnly}
                        maxLength={props.maxLength}
                        invalid={props.invalid}
                        placeholder={props.placeholder}
                        style={props.style}
                        tooltip={props.tooltip || null}
                        tooltipOptions={props.tooltipOptions}
                        required={props.required}
                        keyfilter={props.keyfilter}
                        autoFocus={props.autofocus}
                        tabIndex={props.tabIndex}
                        autoResize={props.autoResize}
                        rows={props.rows}
                        cols={props.cols}
                        aria-label={props['aria-label']}
                        aria-labelledby={props['aria-labelledby']}
                        variant={props.variant}
                        required={props.required}>
                        {props.children}
                    </InputTextarea>

                    {props.helperTextShowIf && (props.helperText || props.helperTextLabelKey) && (
                        <div>
                            <small
                                className={classNames(
                                    'ux-input-helper-text',
                                    props.helperTextClassName,
                                )}>
                                {getHelperTextLabel()}
                            </small>
                        </div>
                    )}

                    {props.showRemaining && (
                        <div>
                            <small
                                id={`${props.id}_characterRemaining`}
                                className={classNames(
                                    `noChar_${charsRemaining === 0}`,
                                    props.charRemainingClass,
                                )}>
                                {getCharRemainingText()}
                            </small>
                        </div>
                    )}

                    {props.showCurrent && (
                        <div>
                            <small
                                id={`${props.id}_charEntered`}
                                className={classNames(
                                    `noChar_${charsEntered === parseInt(props.maxLength, 10)}`,
                                    props.charEnteredClass,
                                )}>
                                {getCharEnteredText()}
                            </small>
                        </div>
                    )}
                </span>
            </span>
        )
    );
};

PrimeInputTextarea.propTypes = {
    // Same as defined in your code
};

PrimeInputTextarea.defaultProps = {
    value: '',
    // Other default props
};

export default PrimeWrapper(PrimeInputTextarea);