React-select: Keep open dropdown when using Async with closeOnSelect not working

[jaypandya73]

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 🙏

[alexandersoto]

@jaypandya73 try also setting autoBlur={false}. It doesn't quite leave the dropdown open, but it does reopen it after a selection is made. I know the default is supposed to be false, but setting it explicitly seems to make a difference.

[rvaitkus23]

@jaypandya73 have you solved this issue? I seems I have the same issue

[masihtamsoy]

I am using "react-select": "^2.0.0-beta.5".

<AsyncSelect
className="select-container"
classNamePrefix="select-internal"
isMulti
closeOnSelect={false}
closeMenuOnSelect={false}
onSelectResetsInput={false}
cacheOptions
defaultOptions
loadOptions={promiseOptions}
/>

This works for me. I can keep dropdown menu open.

[nilansht]

@masihtamsoy Were u able to keep it open in Windows ? Below Windows 10 ?? anywhere ?

[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}
    />

[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

[celso-wo]

@rovolution Your solution worked for me.

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