Refresh the items in Select.Async

[nizamsp]

I have the following Select.Async and a corresponding loadOptions function to load items.

<Select.Async loadOptions={loadOptions} 
                           value={this.state.data.my_value} 
                           onChange={this.logChange} 
                           allowCreate={true} 
                           backspaceRemoves={true} 
                           newOptionCreator={this.optionCreator} 
                        /> 

On a separate UI action, I want to reload this Select.Async items.
I am looking for a function to refresh this Select options or invalidate them.

Any help is much appreciated.

[nizamsp]

I have solved this by using load external option.
https://github.com/JedWatson/react-select#async-options-loaded-externally

Thanks for the great library!

[burgalon]

I still need to solve this issue. I cannot use the load-externally option, as I need to refresh/add options using the onChange() hook

[nizamsp]

@burgalon : You can always add options using the this.state.data right? I load things dynamically into my select but I don't use this Select.Async

 <Select options={this.state.data.all_options}
                            value={this.state.data.selected_option}
                            onChange={this.logChange}
                            allowCreate={true}
                            backspaceRemoves={true}
 />

[burgalon]

@nizamsp I'm currently using <Select.Async> as I need to load more options on each keystroke.

<Select> onChange is fired only after selecting an option.

The problem is that <Select.Async> does not accept options

[joual]

@burgalon What about onInputChange ?

[burgalon]

@joual Thanks. Wasn't aware of onInputChange. That actually works great!
I guess we can close it

[LoicUV]

@burgalon I'm in the same situation and I'm wondering, did you stick using Select.Async & loadOptions or did you completely skip this an used basic Select with onInputChange & options props ?

[burgalon]

@LoicUV yep completely skipped Select.Async and using regular Select with onInputChange

[EdyHartono]

@burgalon i'm using the following code
<Select name= "assignee" inputText="somestring" multi={true} options={options} onInputChange={this._getUsers}/>

_getUsers: function(input){ UserActions.search(input); var optionsDirty = UserStore.getUsers(); options = []; optionsDirty.map(function(option){ options.push({value:option.id, label:option.firstName+' '+option.lastName}); }); }

the problem with this is the text input value get reseted everytime because of DOM update, is there any solution to solve this ?

[burgalon]

@EdyHartono the text value is not supposed to be reset... Any chance you're also passing a different key props to the Select so it's unmounted and created from scratch?

[EdyHartono]

@burgalon i made a mistake here, my Select component is something like this
<Select name= "assignee" options={this.state.options} onInputChange={this._getUsers}/>
and i will setState in the _getUsers function in order to passing down new options array to Select component and everything is working fine except the text value get reseted everytime because of DOM update

[vijayst]

I have a lot of code written using Select.Async. I want to add a new option dynamically and select it. Is that possible? Thanks.

[alphiii]

I am using the same thing (Select with onInputChange), but even though options get changed the dropdown menu does not update it stays No results found. It actually updates only if I Blur/Click away and click dropdown arrow icon (so I need to re oepn the menu)? Any tips what am I doing wrong?

[harmo]

I'm using Select.Async with autoload=false option, and it works as well.

The negative point is that the user is forced to search options by typing a letter.

[alphiii]

Even if you check the demo it has the same issue http://jedwatson.github.io/react-select/ Can you tell me what version are you using and provide some sample code

[VanCoding]

I had the same problem, and solved this in this pull request #1480

Maybe this would be helpful to you as well.

[heyjohnnyfunt]

I have the same problem. I've tried to walk through the answers above, but nothing helped.
I'm using react-select with redux. When new options are loaded, I see in debugger, that render() function is called. However, instead of new options I see "Not found".

The Select component element is like this:
<Select labelKey={'id'} valueKey={'id'} isLoading={this.state.isFetching} value={value} options={options} onInputChange={this.startPoll} onChange={handleSelect}/>

this.startPoll function is like this:
startPoll(val, cb) { this.setState({isFetching: true}); this.props.updateInput(val); if (this.timeout) { clearTimeout(this.timeout); } this.timeout = setTimeout(() => { this.setState({isFetching: false}); searchUser(val); }, 2000); return val; }.

searchUser function is just using fetch.

When I add a custom input element, where I type the search value instead of standard Select input, Select options are updated perfectly. But when I type in Select, the only way to update options is to reopen list of options.
I'm wondering why does this happen?

[jamesmarrs]

Currently using this solution as a work around:

I like the functionality of the Select.Async ~ so I wanted to keep this functionality, but had a similar problem to where I wanted to manually tigger loadOptions (based on my state, my apiCall function makes an api service call that can pass additional params to scope the data).

<Select.Async
    cache={false}
    ref="selectUser"
    multi={false}
    onChange={this.inputChange.bind(this, "selectUser")}
    loadOptions={this.userApiCall.bind(this)}
    value={this.state.selectUser} />

In another function, I use the reference selectUser to load new options into the Select.Async component.

this.refs.selectUser.loadOptions("")

Doesn't feel like the react way of doing this, but I wanted to keep the Async functionality of this plugin. Definitely going to keep an eye on @VanCoding s solution to this problem.

[heyjohnnyfunt]

@jamesmarrs I can not understand, where do you call your this.refs.selectUser.loadOptions("") function?
I've tried the way you do with Async functionality, but it's the same result - options are not updated before I reopen the list.

[jamesmarrs]

@heyjohnnyfunt you should be able to call this.refs.selectUser.loadOptions("") anywhere you want as long as the component is mounted. For example an onChange event for a checkbox within the component.

There could be a delay if your api is dependent on a specific state, so you might want to run it in a success callback:

checkboxChanged(e) {
  this.setState({ onlyAdmins: e.currentTarget.checked }, () => {
      this.refs.selectUser.loadOptions("") // <- Has logic to only pull admins if onlyAdmins is set to true
  })
}

As soon as loadOptions is called, the Select.Async component should indicate its loading.

If you want to post an example specific to your use case I can try and help!

[VanCoding]

I've done it the same way @jamesmarrs does before I created my PR.
That also works fine.

There are pros & cons to both solutions.

[MethodenMann]

im also have the same problems like @heyjohnnyfunt with react-select and redux. Do you have a solution to refresh the options without blur?

[heyjohnnyfunt]

@MethodenMann No, I didn't manage to refresh without blur so I've written my own component

[MethodenMann]

Ok i figured out that it worked the whole time. The problem was that i worked with a mocked fetch. Whatever i wrote into the select, my fetch returned a bunch of records. What i didn't realize was, that the react-select has a filter that filters my loaded records with the string i entered to search. What happend is, on blur my entered text disappears and no filter was applied. Setting filterOption solved it for me in this case:

filterOption={() => (true)}

[sabarasaba]

@MethodenMann hot damn, was debugging my code for hours until I found this little comment. Thanks!

[lecerd]

@MethodenMann: It's alive! I was about to call it a day. Cheers!
@sabarasaba: It seems that today was "fight react-select" day in Argentina jajaja

[danield137]

@MethodenMann this has been bugging me for a while! thanks mate!

[alrms]

@MethodenMann You are awesome!!

[dinidu01]

@MethodenMann you rock. Came here after 2 nights of no sleep.

[ablamunits]

@MethodenMann Even after all this time - thank you.

[AuthorProxy]

can you give any js fiddle example

[dwickstrom]

This works for me:

<Async
  key={JSON.stringify(this.state.someUpdatedProp)}
  ...
  />

[SergTanchenko]

Ok i figured out that it worked the whole time. The problem was that i worked with a mocked fetch. Whatever i wrote into the select, my fetch returned a bunch of records. What i didn't realize was, that the react-select has a filter that filters my loaded records with the string i entered to search. What happend is, on blur my entered text disappears and no filter was applied. Setting filterOption solved it for me in this case:

filterOption={() => (true)}

You are awesome!
I used react-select + redux-saga (the same approach is described here: https://stackoverflow.com/a/43168905/2637095)
This hack saved my day!

[phabreeze]

Ok i figured out that it worked the whole time. The problem was that i worked with a mocked fetch. Whatever i wrote into the select, my fetch returned a bunch of records. What i didn't realize was, that the react-select has a filter that filters my loaded records with the string i entered to search. What happend is, on blur my entered text disappears and no filter was applied. Setting filterOption solved it for me in this case:

filterOption={() => (true)}

This was bugging me for a couple of days, thanks heaps!

[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!