React-select: Async loadOptions doesn't get recalled after receiving new props

[alexjesp]

Context

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!

[sslotsky]

I suspect this is the same/similar issue I'm having. I'm rendering a form to edit a Kit, and for each of the associated kitProducts I have a Select.Async that I'm using for product lookup.

        <Select.Async
          id={id}
          loadOptions={_.debounce(load, 500)}
          labelKey={::this.labelKey()}
          valueKey={::this.valueKey()}
          value={field.value}
          {...field}
          onChange={::this.handleChange}
          onBlur={() => this.handleBlur(field)} />

In the snippet above, my field.value has value when the component renders, but the only ajax call going off has an empty input string and my select box is empty.

[sslotsky]

As a clarifying point, my field.value is not null during any attempt to render this component. Not even the first. But I experience the same issue described by @alexjesp .

The hidden input also has no value, despite field.value being present.

[sslotsky]

I wonder if the answer to this is to allow us to supply a set of preloaded options. Assuming that you know everything about your currently selected option when you render, you could pass it in as a single option.

This doesn't seem to work though. I tried supplying an options property and it was simply ignored.

[pudgereyem]

What's the status on this? I'd like this as @alexjesp has proposed.

[bionicvapourboy]

I solved in this way:

loadOptions={(val)=>getterAPI(val ? val: initialValue)}

[eyerean]

Any updates on this? I managed to get it _almost_ working by setting cache={false}, but it still gets the new props only the second time the Select is being clicked.

[helmarjunior]

This works for me:

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

Example working: https://github.com/helmarjunior/react-hooks-select-async

[VimLeSai]

I solved in this way:

loadOptions={(val)=>getterAPI(val ? val: initialValue)}

Not working

[DarkLegend]

@helmarluiz A very clever trick to force rerendering! thank you. That did the trick for me.

[marisaaquilina]

@helmarluiz This worked, thanks!

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