React-select: AsyncCreatable not adding to options list

[typeofgraphic]

Thank you for maintaining this very useful component, I have used it with great success until I have tried to implement the AsyncCreatable component. The documentation would benefit from clear code examples.

My code:

 <AsyncCreatable
       name="event-search"
       value={this.state.Event}
       loadOptions={this.handleEventSearch}
       onChange={this.handleChangeEvents}
       newOptionCreator={this.handleCreateNewEventInput} />

• handleEventSearch is working fine, a list of events is loaded and appears in the dropdown

• handleChangeEvents returns the following object when a new option is selected:

{value: "some event", label: "some event", className: "Select-create-option-placeholder"}

newOptionCreator returns returns the object:

{ label: option "some event", labelKey: "label", valueKey: "value" }

I have checked the options array in the Select component, no new options are added.

[typeofgraphic]

Switched to just using Creatable, which initially produced an error relating to the mutation of the Options array issue (see #1477). The setup and pattern to get Creatable working without error is:

 <Creatable
     value={this.state.value}
     options={this.state.options} 
     onChange={this.handleChange}
     onNewOptionClick={this.handleNewOptionClick}                        
/>

onChange deals with the selection of options that already exist in the list:

Option selected (value) --> onChange prop (value) --> handlerFn (value) --> setState Input: (value)

onNewOptionClick deals with adding new options to the list:

New Input (value) --> onNewOptionClick prop (value) --> handlerFn(value) --> setstate options: [...this.state.options, value ]

Its seems now that AsyncCreatable is probably not writing new options because the loadOptions prop was talking to a local method which returns a promise, which AsyncCreatable cannot write to.

At the very least, this highlights the need to update the documentation. Perhaps this would have been more appropriate to post on SO, but that would fail to highlight what seems to be a bug (or documentation issue) around AsyncCreatable.

[bernatfortet]

Is there any plan on fixing this issue?

[minhquankq]

The same issue, if I use Select.Creatable component I can add new value to options on onChange event, but when use Select.AsyncCreatable, I can't add in loadOptions. Any ideas?

[bernatfortet]

@minhquankq I ended up forking the repo and fixing it on my own:
https://github.com/bernatfortet/react-select
You can check the commits

[aatif24]

i know its very late,
but facing same issue that once i create a new option, it does not get listed because loadOptions was not getting called, so i just removed "cacheOptions" from props and it worked for me.

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue 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!