React-select: Add maxlength prop to AsyncCreatable

[stinoga]

It would be nice to be able to set a maxlength on the combobox input through a prop so we can limit the length on tag creation if needed.

[AlinCiocan]

What happened to this issue? Any updates?

[cal0610]

This feature would be very useful.

[cal0610]

Just some quick look into the source code, found that you can actually pass inputProps to the component...

e.g.
inputProps={{ maxLength: 5 }}
{...this.props}
/>

[krnlde]

@cal0610 doesn't work for me, also it is not documented in @types/react-select
Es seen here #2571 the inputProps is removed in v2

[tmeisenh]

You can provide a custom Input to the Select's component props that has a maxLength set.

e.g.
`
import Select, {components} from 'react-select';
const MaxLengthInput = props => ;

...
components={{Input: MaxLengthInput}}
`

[mponizil]

@tmeisenh what if maxLength needs to be parameterized as well? Surely we don't want to define MaxLengthInput on every render...

const MyFieldWithMaxLength = (props) => {
  const MaxLengthInput = (inputProps) => <components.Input maxLength={props.inputMaxLength} {...inputProps} />
  return <Select components={{ Input: MaxLengthInput }} />
}

For anyone else -- I settled on implementing manually via onInputChange:

const handleInputChange = inputValue => {
    if (props.inputMaxLength && inputValue.length > props.inputMaxLength) {
        return;
    }
    setInputValue(inputValue);
};

[ruben0626]

Why did we close this one?

[ebonow]

A working solution to this is writing a custom Input component and leveraging selectProps.

const Input = props => {
  const { maxLength } = props.selectProps;
  return <components.Input {{...props }} maxLength={maxLength} />
}

const MySelect = props => <Select components={{Input}} maxLength={props.maxLength} ... />