React-select: Refresh the items in Select.Async
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
All 35 comments
I have solved this by using load external option.
https://github.com/JedWatson/react-select#async-options-loaded-externally
Thanks for the great library!
nizamsp
on 7 Feb 2016
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
burgalon
on 15 Feb 2016
@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}
/>
@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
burgalon
on 15 Feb 2016
@burgalon What about onInputChange ?
joual
on 21 Feb 2016
@joual Thanks. Wasn't aware of onInputChange. That actually works great!
I guess we can close it
burgalon
on 29 Feb 2016
@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 ?
LoicUV
on 15 Apr 2016
@LoicUV yep completely skipped Select.Async and using regular Select with onInputChange
burgalon
on 18 Apr 2016
@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 ?
EdyHartono
on 4 May 2016
@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?
burgalon
on 4 May 2016
@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
EdyHartono
on 5 May 2016
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.
vijayst
on 23 Dec 2016
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?
alphiii
on 3 Jan 2017
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.
harmo
on 5 Jan 2017
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
alphiii
on 5 Jan 2017
I had the same problem, and solved this in this pull request #1480
Maybe this would be helpful to you as well.
VanCoding
on 12 Jan 2017
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?
heyjohnnyfunt
on 16 Feb 2017
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.
jamesmarrs
on 16 Feb 2017
@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.
heyjohnnyfunt
on 17 Feb 2017
@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!
jamesmarrs
on 17 Feb 2017
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.
VanCoding
on 17 Feb 2017
im also have the same problems like @heyjohnnyfunt with react-select and redux. Do you have a solution to refresh the options without blur?
MethodenMann
on 29 Mar 2017
@MethodenMann No, I didn't manage to refresh without blur so I've written my own component
heyjohnnyfunt
on 1 Apr 2017
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)}
MethodenMann
on 3 Apr 2017
@MethodenMann hot damn, was debugging my code for hours until I found this little comment. Thanks!
sabarasaba
on 13 Jun 2017
@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
lecerd
on 13 Jun 2017
@MethodenMann this has been bugging me for a while! thanks mate!
danield137
on 27 Jun 2017
@MethodenMann You are awesome!!
alrms
on 12 Jul 2017
@MethodenMann you rock. Came here after 2 nights of no sleep.
dinidu01
on 15 Aug 2017
@MethodenMann Even after all this time - thank you.
ablamunits
on 10 May 2018
can you give any js fiddle example
AuthorProxy
on 27 Jun 2018
This works for me:
<Async
key={JSON.stringify(this.state.someUpdatedProp)}
...
/>
dwickstrom
on 27 Jun 2018
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!
SergTanchenko
on 25 Apr 2019
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!
fabdotnet
on 18 Jun 2019
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
on 28 May 2020
Related issues
mbonaci
路
3Comments
sampatbadhe
路
3Comments
geraldfullam
路
3Comments
Meesam
路
3Comments
pashap
路
3Comments
Most helpful comment
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)}