Async loadOptions doesn't get recalled after receiving new props
See original GitHub issueContext
I have an API that only gives me more data after the initial render of my React application. Imagine initially in my app component I have this.props.activeItemId
as null
. Then when the extra data fetches, it rerenders my app with this.props.activeItemId
as 2499
.
Example
Using Select.Async
and loadOptions
I can do a custom filter of the options I want, based on the query. The custom filter I am implementing is based on the value of this.props.activeItemId
(so that I can always include it in the filtered options to show up as the selected option at the top of the option results). Like so:
render () {
return (
<div className='SomeDiv'>
<Select.Async
autoBlur
searchable
cache={false}
clearable={false}
filterOptions={false} /* using a custom filter */
backspaceRemoves={false}
value={this.props.activeItemId}
onChange={::this.onChange}
loadOptions={::this.getItems}
/>
</div>
)
}
getItems (query, callback) {
let options = this.someCustomFilter(query)
return callback(null, { options })
}
someCustomFilter (query) {
let result = this.props.items
result = someFilterBasedOnQuery(query)
result = _.take(result, 20)
/**
* When an item is active that isn't contained in the most relevant 20
* we want to include at the top of the options, so it can appear as active
*/
if (!query || query === '' && !_.findWhere(result, {id: this.props.activeItemId})) {
result.unshift(_.findWhere(this.props.items, {id: this.props.activeItemId}))
}
return result
}
Issue
When Select.Async
receives a new props on rerender, it doesn’t re-call loadOptions
again, with the new props (activeItemId
2499) so I end up with a select box, with no active item, since the filtered options aren’t up to date.
Solution
I made this PR in my own fork to show you the proposed change to ‘react-select/src/Async.js’ https://github.com/alexjesp/react-select/pull/1/files
Please let me know if you think the solution is valid, if so, I can PR it against this repo (I just didn’t want to pollute your PRs). The change doesn’t break current tests.
Thanks for any help!
Issue Analytics
- State:
- Created 8 years ago
- Reactions:13
- Comments:11 (1 by maintainers)
Top GitHub Comments
This works for me:
Example working: https://github.com/helmarjunior/react-hooks-select-async
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!