React Select Async options not showing

Question

I have an API call which is returning data and the best I can see I am returning the options in the correct way but for some reason I can't get React Select to show the options. Is there something that I am missing?

searchGroups(searchString){
    if(!searchString) return Promise.resolve({ options: [] });
    UserGroups.getUserGroups(searchString).then((res) => {
      let groups = [];
      groups = res.groups.map((d) => ({
        value: d.group_ID,
        label: d.group_name
      }))
      return {options: groups};
    }, (e) => {
      this.setState({
        searchError: e.message
      })
    })
  }

From what I can see the groups array is (upon a search) returning as

[
    {value: 1, label: "Admins"}
    {value: 22, label: "Asset Group"}
    {value: 2, label: "Read-only"}
]

However the search box is being suspended with a "loading..." message and the load spinner stays. I can see the API has returned but no options are being displayed.

This is how I implement the Select is there an option I am missing? I have tried both valueKey and labelKey but neither have worked for me either.

<Select.Async
      multi={true}
      onChange={this.onChange}
      loadOptions={this.searchGroups}
      value={this.state.value}
 />

I'm sure it is how I'm returning the data but not sure where this is going wrong and what formatting I need to correct. Any help would be greatly appreciated.

Answer 1

The problem was a missing return before UserGroups.getUserGroups(... This caused the async code to get executed and show up in the network log, but the results wouldn't reach Select.Async. It would be nice if react-select would give an error if calling loadOptions returns undefined, but in that case it assumes a callback will be used to provide the result.