react-select: Select.Async multi doesn't work

2017-06-02_12-25-09 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)

Most upvoted 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

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