react-select: Select.Async multi doesn't work
Recommended plunker doesn’t work, so I put the code here below.
class Foobar extends React.Component<null, {value: string[]}> {
constructor(props) {
super(props);
this.state = {
value: []
};
}
options = [
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' }
];
loadOptions = (input, callback) => {
callback(null, {options: this.options});
};
onChange = (options) => {
this.setState({
value: options.map(x => x.value)
});
};
render() {
console.log('state', this.state.value);
return (
<div>
<p><b>Select</b> works well</p>
<Select
multi
value={this.state.value}
options={this.options}
onChange={this.onChange}
/>
<p>but <b>Select.Async</b> breaks as soon as you select an option</p>
<Select.Async
multi
value={this.state.value}
loadOptions={this.loadOptions}
onChange={this.onChange}
/>
</div>
);
}
}
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 20
- Comments: 15 (3 by maintainers)
it is fixed please use this. import AsyncSelect from “react-select/lib/Async”; <AsyncSelect getOptionLabel={({ name }) => name} getOptionValue={({ id }) => id} loadOptions={this.promiseOption} isMulti onChange={option => this._handleChangeInSelect(option)} />
I managed to get it working by defining formatOptionLabel, getOptionValue and getOptionLabel
This is still broken in 2.1.1. Selecting any option makes it impossible to see or select further options.
@DarkLegend can you send a fiddle or codesandbox… I couldnt get it working with latest release