Select.Async with Promise - Shows "[object, object]" in input field when doing a search

This is my Select.Async code: <Select.Async name="code-chooser" valueKey="codeid" labelKey="codeDescription" value={this.state.chosenCode} loadOptions={this.getCodes} onChange={(code) => {this.setChosenCode(code)}} onInputChange={(value) => { return ""; }} placeholder="Select code..." ignoreCase={ true } clearable={ true } searchable={ true } />

My option object looks like this: {codeid: "<ID>", codeDescription: "<description>", codeLongDescription: "<long description>"}

As you can see in the onInputChange attribute I just return “”. When I have it like this everything works, but if I instead return the value or if I remove the whole “onInputChange” the input field dosn’t work anymore. As soon as I try to search, the input field just displays “[object, object]”. I also notice that every time I press a key the getCodes-function runs.

[Frezzaldo]

I ended up with the following configuration:

<Select.Async
                name="code-search"
                valueKey="codeid"
                labelKey="codeDescription"
                value={this.state.chosenCodeType}
                loadOptions={this.getCodeTypes}
                onChange={(codeType) => {this.setChosenCodeType(codeType);}}
                onInputChange={() => { return ""; }}
                optionRenderer={this.renderOption}
                filterOption={this.filterCodeType}
                ignoreCase={true}
                clearable={true}
                searchable={true}
                multi={false}
 />

The two most important settings are onInputChange and filterOption. Returning only “” in the onInputChange method prevent the getCodeTypes to run every time you press a key. Then in the filterOption (runs on each element in en dropdown) you return true or false if the element should display or not. This is how my filter-method looks like:

filterCodeType(option, filter) {
        const {codeid, codeDescription, codeLongDescription} = option;
        const filterWords = filter.trim().split(' ');

        for(let i in filterWords ) {
            const fWord= filterWords[i];
            if (fWord!= codeid && codeDescription.toLowerCase().indexOf(fWord) == -1 && codeLongDescription.toLowerCase().indexOf(fWord) == -1) {
                return false;
            }
        }
        return true;
    }

This worked for me @jsartisan @diegoconcha .

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we’re closing old issues / pull requests.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest version.

If you feel this issue / pull request is still relevant and you’d like us to review it, please leave a comment and we’ll do our best to get back to you.