Keep open dropdown when using Async with closeOnSelect not working

Hi guys,

I want to keep open drop-down menu of search when searching users/lists from with Select.Async after selecting option from drop-down.

I’ve seen similar issues and as @JedWatson given suggestions here https://github.com/JedWatson/react-select/issues/1542#issuecomment-328919546, I’ve tried to do the same but no luck.

here is code which I’m using:

  getList(input) {
	if (!input) {
	  return Promise.resolve({ options: [] });
	}
    return axios.get(`http://localhost:4000/api/v1/search?search=${input}`)
    .then(response => {
      this.setState({
        searchedOptions: response.data.ideas
      })
      return { options: response.data.ideas };
    })
  }


<Select.Async
      closeOnSelect={false}
      onSelectResetsInput={false}
      backspaceRemoves={true}
      value={this.state.value}
      onChange={this.onChange}
      onValueClick={this.gotoItem}
      valueKey="id"
      labelKey="title"
      loadOptions={this.getList}
      noResultsText={'No result found :('}
      cache={false}
      />

Can any one can tell me how to keep open drop-down menu with Async after selecting option from it? Any help would be appreciated 🙏

[rovolution]

I figured out a work-around for this (though it relies on deprecated code that will probably be removed in the near future)

If you examine the source-code for the Async component, you can see that it currently uses the now-deprecated componentWillReceiveProps method. In the method, it is checking to see if the defaultOptions prop has changed. If it has, it will update the local state value that holds the default options: https://github.com/JedWatson/react-select/blob/master/packages/react-select/src/Async.js#L97-L103

Within your loadOptions handler method, you can store the fetched options in the local state of your component that render’s Async. This will then trigger a re-render of that component, and you pass those options down from the state into the defaultOptions prop of Async. It will trigger the componentWillReceiveProps and update the defaultOptions. When you select an option, this logic will be triggered in Async. Then when the render() method is executed, this logic in the Async component render method will default to using defaultOptions to populate the options list.

For reference, I created a sandbox: https://codesandbox.io/s/react-codesandboxer-example-nxrzu?fontsize=14&hidenavigation=1&theme=dark

[rheydt]

I also have this issue with Async. Although the dropdown stays open, the options clear (because the input clears), defeating the purpose of leaving it open at all.

Have tried setting a bunch of props I’ve seen mentioned in various issues:

    <AsyncSelect
        autoload={false}
        cacheOptions={true}
        loadOptions={this.getLoadOptions(loadOptions)}
        value={value ? value.map(this.translateOption) : this.state.value} 
        closeOnSelect={false}
        closeMenuOnSelect={false}
        onSelectResetsInput={false}
        removeSelected={false}
        hideSelectedOptions={false}
        autoBlur={false}
    />