Select.Async multi doesn't work
See original GitHub issueRecommended 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>
);
}
}
Issue Analytics
- State:
- Created 6 years ago
- Reactions:20
- Comments:15 (3 by maintainers)
Top Results From Across the Web
Clear react multi-select/async - Stack Overflow
I'm using the async multi-selector from the following: https://react-select.com/home#async. It works perfectly, but I would like to clear ...
Read more >Async - React Select
A flexible and beautiful Select Input control for ReactJS with ... Async. Use the Async component to load options from a remote source...
Read more >Asynchronous Programming - EF Core - Microsoft Learn
Querying and saving data asynchronously with Entity Framework Core. ... EF Core doesn't support multiple parallel operations being run on ...
Read more >How to use the react-select.Async function in react-select | Snyk
To help you get started, we've selected a few react-select.Async examples, based on popular ways it is used in public projects.
Read more >Select - Examples - Components - Atlassian Design System
Select allows users to make a single selection or multiple selections from a list ... Use AsyncSelect to load asynchronous data from a...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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