javascriptmaterial-uiautocompletenumbersmaxlength

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


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}
        />
    )
}

Solution

  • 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}
            />
        )
    }