MUI: TextField not support type number with maxLength restriction how to fix the same?

Question

I'm trying to apply maxLength to TextField component while type is number but it not working.

my code is:

const CustomTextField = ({
    label,
    value,
    maxLength,
    required,
    disabled,
    handleChange,
    handleClear,
    error,
    helpertext,
    shrink,
    type,
    placeholder
}) => {

    return (
        <TextField
            label={label}
            fullWidth
            size='small'
            variant='standard'
            value={value}
            type={type}
            placeholder={placeholder}
            inputProps={{ maxLength: (maxLength && parseInt(maxLength)) || 99}}
            InputLabelProps={{ shrink: shrink, style: { fontSize: 18 } }}
            required={required}
            onChange={handleChange}
            InputProps={{
                endAdornment: (
                    (value?.length > 0 && !disabled) ? <IconButton onClick={handleClear}>
                        <ClearOutlinedIcon/>
                    </IconButton> : ''
                ),
                readOnly: disabled
            }}
            error={error}
            helperText={helpertext}
        />
    )
}

CustomTextField.propTypes = {
    disabled: PropTypes.bool.isRequired,
    error: PropTypes.bool,
    handleChange: PropTypes.func.isRequired,
    handleClear: PropTypes.func.isRequired,
    helpertext: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    maxLength: PropTypes.string,
    placeholder: PropTypes.string,
    required: PropTypes.bool.isRequired,
    type: PropTypes.string,
    value: PropTypes.string,
}

Answer 1

    const CustomTextField = ({
    label,
    value,
    maxLength,
    required,
    disabled,
    handleChange,
    handleClear,
    error,
    helpertext,
    shrink,
    type,
    placeholder
}) => {

    return (
        <TextField
            label={label}
            fullWidth
            size='small'
            variant='standard'
            value={value}
            type={type !== 'number' && type}
            placeholder={placeholder}
            inputProps={{ maxLength: (maxLength && parseInt(maxLength)) || 99}}
            InputLabelProps={{ shrink: shrink, style: { fontSize: 18 } }}
            required={required}
            onChange={handleChange}
            onInput={(e) => {
              if (type === 'number') {
                // Allow digits and a single decimal point
                e.target.value = minusAccepted ? e.target.value.replace(/[^-0-9.]/g, '') : e.target.value.replace(/[^0-9.]/g, '');

                // Ensure that there is at most one decimal point
                const decimalCount = (e.target.value.match(/\./g) || []).length;
                if (decimalCount > 1) {
                  e.target.value = e.target.value.slice(0, e.target.value.lastIndexOf('.'));
                }

                // Convert the input value to a number
                const numericValue = parseFloat(e.target.value);

                // Check if the numeric value exceeds the maxValue prop
                if (!isNaN(numericValue) && maxValue !== undefined && numericValue > maxValue) {
                  e.target.value = maxValue.toString();
                }
                if (!isNaN(numericValue) && minValue !== undefined && numericValue < minValue) {
                  e.target.value = minValue.toString();
                }
              }
            }}
            InputProps={{
                endAdornment: (
                    (value?.length > 0 && !disabled) ? <IconButton onClick={handleClear}>
                        <ClearOutlinedIcon/>
                    </IconButton> : ''
                ),
                readOnly: disabled
            }}
            error={error}
            helperText={helpertext}
        />
    )
}

CustomTextField.propTypes = {
    disabled: PropTypes.bool.isRequired,
    error: PropTypes.bool,
    handleChange: PropTypes.func.isRequired,
    handleClear: PropTypes.func.isRequired,
    helpertext: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    maxLength: PropTypes.string,
    placeholder: PropTypes.string,
    required: PropTypes.bool.isRequired,
    type: PropTypes.string,
    value: PropTypes.string,
}