Untitled

import React, { useState, useRef } from 'react';
import { InputText } from 'primereact/inputtext';
import PrimeWrapper from '../primeWrapper/primewrapper';
import PropTypes from 'prop-types';
import classNames from 'classnames';

const PrimeInputText = (props) => {
    const inputRef = useRef(null);
    const [value, setValue] = useState(props.value || '');

    // Handles the input event and applies autoCapitalize if necessary
    const handleInput = (event) => {
        let inputValue = event.target.value;

        // Apply autoCapitalize if enabled
        if (props.autoCapitalize) {
            inputValue = inputValue.toUpperCase();
        }

        setValue(inputValue);

        // Call props.onInput if provided
        if (props.onInput) {
            props.onInput(event);
        }

        // Update the ref to keep track of the current value
        inputRef.current.value = inputValue;
    };

    return (
        (props.showif !== undefined ? props.showif : true) && (
            <div className="prime-input-text-wrapper">
                <div>
                    <label className={props.labelClassName}>
                        {props.evalLabel(props)}
                    </label>
                </div>
                <span className="prime-input-text-container">
                    {(props.prefixLabelText || props.prefixLabel) && (
                        <span className="prime-input-text-prefix">
                            <span>{getPrefixLabel()}</span>
                        </span>
                    )}
                    <InputText
                        ref={inputRef}
                        id={props.id}
                        className={props.className}
                        value={value}
                        onInput={handleInput} // Use handleInput instead of onChange
                        keyfilter={props.keyfilter}
                        placeholder={props.placeholder}
                        variant={props.variant}
                        tooltip={props.tooltip || null}
                        tooltipOptions={props.tooltipOptions}
                        validateOnly={props.validateOnly}
                        invalid={props.invalid}
                        disabled={props.evalBool(props, 'disabled')}
                        unstyled={props.evalBool(props, 'unstyled')}
                        readOnly={props.readOnly}
                        maxLength={props.maxLength}
                        size={props.size || null}
                        type={props.type}
                        style={props.style}
                        autoFocus={props.autofocus}
                        autoComplete={props.autoComplete}
                        tabIndex={props.tabIndex}
                        aria-label={props.arialabel}
                        onBlur={props.onBlur}
                        onFocus={props.onFocus}>
                        {props.children}
                    </InputText>
                    {props.suffixLabelText && (
                        <span
                            className={classNames(
                                'prime-input-text-suffix',
                                props.suffixLabelClass,
                            )}>
                            <span>{getSuffixLabel()}</span>
                        </span>
                    )}
                </span>
            </div>
        )
    );
};

PrimeInputText.propTypes = {
    // Other PropTypes definitions
    autoCapitalize: PropTypes.bool,
};

PrimeInputText.defaultProps = {
    value: null,
    validateOnly: false,
    invalid: false,
    variant: 'outlined',
    tooltip: null,
    tooltipOptions: null,
    unstyled: false,
    size: null,
    type: 'text',
    autofocus: false,
    autoComplete: 'on',
    autoCapitalize: false,
};

export default PrimeWrapper(PrimeInputText);







import React from 'react';
import PrimeInputText from './PrimeInputText';

const TestAutoCapitalize = () => {
    return (
        <div>
            <h2>Auto-Capitalize Test</h2>
            <PrimeInputText
                id="test-input"
                autoCapitalize={true} // Enables auto-capitalize
                placeholder="Type here to auto-capitalize"
                className="p-inputtext"
            />
        </div>
    );
};

export default TestAutoCapitalize;