Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AsyncCreatable not adding to options list #2021

Closed
typeofgraphic opened this issue Sep 25, 2017 · 7 comments
Closed

AsyncCreatable not adding to options list #2021

typeofgraphic opened this issue Sep 25, 2017 · 7 comments

Comments

@typeofgraphic
Copy link

typeofgraphic commented Sep 25, 2017

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
Copy link
Author

typeofgraphic commented Sep 26, 2017

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
Copy link

Is there any plan on fixing this issue?

@minhquankq
Copy link

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
Copy link

@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
Copy link

aatif24 commented May 5, 2020

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
Copy link
Contributor

bladey commented May 28, 2020

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!

@bladey bladey closed this as completed May 28, 2020
@flora8984461
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants