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

Question

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

export default function Select({
    onChangeInput,
    label,
    name,
    value,
    options,
    placeholder,
    disabled,
    error,
    helpertext,
    required,
    shrink,
    maxLength,
    type
}) {

    const _onChange = useCallback((e, v) => {
        onChangeInput(v)
    })

    return (
        <Autocomplete
            freeSolo
            fullWidth={true}
            multiple={false}
            margin={'noraml'}
            readOnly={disabled}
            name={name}
            isOptionEqualToValue={useCallback((option, value) => option.label === value.label)}
            value={value}
            options={options}
            placeholder={placeholder}
            renderInput={useCallback(params => {
                return <TextField {...params}
                    type={type}
                    label={label}
                    error={error}
                    required={required}
                    helperText={helpertext}
                    variant={'standard'}
                    inputProps={{ ...params.inputProps, maxLength: (maxLength && parseInt(maxLength)) || 99}}
                    InputLabelProps={{ shrink: shrink, style: { fontSize: 18 } }}
                />
            })}
            onInputChange={_onChange}
        />
    )
}

Answer 1

I have used to inputProps properties of TextField Componet modified value provided by user in the following way

export default function Select({
    onChangeInput,
    label,
    name,
    value,
    options,
    placeholder,
    disabled,
    error,
    helpertext,
    required,
    shrink,
    maxLength,
    type
}) {

    const _onChange = useCallback((e, v) => {
        if (maxLength && parseInt(maxLength) >= v.length) {
            onChangeInput(v)
        }
    })

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

    return (
        <Autocomplete
            freeSolo
            fullWidth={true}
            multiple={false}
            margin={'noraml'}
            readOnly={disabled}
            name={name}
            isOptionEqualToValue={useCallback((option, value) => option.label === value.label)}
            value={modifiedValue}
            options={options}
            placeholder={placeholder}
            renderInput={useCallback(params => {
                return <TextField {...params}
                    type={type}
                    label={label}
                    error={error}
                    required={required}
                    helperText={helpertext}
                    variant={'standard'}
                    inputProps={{ ...params.inputProps, maxLength: (maxLength && parseInt(maxLength)) || 99, value: modifiedValue}}
                    InputLabelProps={{ shrink: shrink, style: { fontSize: 18 } }}
                />
            })}
            onInputChange={_onChange}
        />
    )
}