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,
}

Answer 2

After go through the document I found it not support by default. After I did some custom logic using slice() method and accept input logic some thing below, which work for me.

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

    const _onChange = useCallback(e => {
        if (maxLength && parseInt(maxLength) >= e.target.value.length) {
            handleChange(e)
        }
    })

    const modifiedValue = maxLength ? value?.slice(0, parseInt(maxLength)) : value

    return (
        <TextField
            label={label}
            fullWidth
            size='small'
            variant='standard'
            value={modifiedValue || ''}
            type={type}
            placeholder={placeholder}
            inputProps={{ maxLength: (maxLength && parseInt(maxLength)) || 99, value: modifiedValue || ''}}
            InputLabelProps={{ shrink: shrink, style: { fontSize: 18 } }}
            required={required}
            onChange={_onChange}
            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,
}