Async Multiselect, options dropdown hides every time an option selected

[dspoonia7]

In Async Multiselect (Select.Async), if multi-select is true then options dropdown hides every time an option selected. To see the dropdown I have to search/type. I want to keep dropdown opened instead of hiding it every time after selecting an option like happens in normal Multiselect.

A gif is attached showing issue

[cordoval]

i desire to have the same effect of closing the options dropdown automatically but on the first case of basic multiselect. Can anyone hint me how to do this please?

[dspoonia7]

@cordoval try setting autoBlur={true}.

[cordoval]

thanks!

[sgoran]

Have the same problem with async and multiselect

[literatura]

I have the same problem with async and multiple. The option autoBlur={true} does not help.
Му code:
<Select.Async className='selectFilter' name='form-field-name' value={curValues} multi={true} autoload={false} autoBlur={true} backspaceRemoves={false} menuContainerStyle={{ zIndex: 5 }} loadOptions={this.getOptions} onChange={this.handleChangeSelect.bind(this, someKey)} cache={false} />

[dherran]

This was suggested and pull requested a long time ago #882

[w3-3w]

Since Jed approved changes in #1289 , while still someone need to keep the options after selection, I think it is better to add a configurable prop to Async, defining whether options should be cleared after selection on Async when multi is true.

[RafaelSalguero]

I have the same problem

[begincalendar]

#1561 appears to be a duplicate of this issue.

Edit: @dherran my apologies, #882 is necessary and is related to this issue, but they are not the same issues.

[tridip1931]

@dspoonia7 Did you get the solution for this? I have the same issue. I am using Async

[begincalendar]

@tridip1931 A workaround would be to extend the Async class and override the clearOptions() method, such that it does nothing.

[dspoonia7]

Hey @tridip1931, Yes I was able to get it working (It's been a while so not actually remember I got this). This solution worked for me.

  getOptions = (query, callback) => {
      // In http call response
      const options = [{ value: <val>, label: <val> }, ...]
     callback(null, {
        options: options
      })
  }

   const selectedValues = [{ value: <val>, label: <val>, name: <val> }, ...]

  <Select.Async
      ref='<refNode>'
      value={selectedValues}
      loadOptions={this.getOptions}
      autosize={true}
      multi={true}
      clearable={false}
      cache={false}
      onChange={(item) => this.handleOnChange(item)}
      onFocus={this.handleOnFocus}
    />

Hope this is helpful :)

[tridip1931]

Thanks @dspoonia7 @begincalendar I am quite new to React so forgive my dumb questions.
I am using AsyncCreatable to generate the multiselect option.

@begincalendar Can you elaborate where to use clearOptions()?

@dspoonia7 What different from the default component you did that made it work?

Thanks 🙇

[begincalendar]

@tridip1931 Take a look at how clearOptions() is used here and its implementation here.

So if you do something like this:

class MyAsync extends Select.Async {
  clearOptions() {
  }
}

You are working around the issue by making clearOptions() do nothing, instead of the undesirable behaviour which is the focus of this issue.

[JedWatson]

I've changed the way this whole feature works (the changes will be published as rc.9 or final) so you can control this behaviour now.

The menu will always close by default for both single and multi-select, but you can change it with the closeOnSelect={false} prop.

To keep suggestions from the Async component after selecting an option, also set onSelectResetsInput={false}

[tommyalvarez]

@JedWatson is this implemented in "react-select": "^1.0.0-rc.3", ? Because that option is not working for me

[manjuprem12]

Reactjs TypeError: Unable to get property 'string' of undefined or null reference.
i am getting the above error while implementing Async options. I was trying with react class component not using createclass
reference : https://reactjsexample.com/a-fork-of-react-select-with-support-for-option-groups/
Please give me some solution.

https://stackoverflow.com/questions/59420913/reactjs-typeerror-unable-to-get-property-string-of-undefined-or-null-referenc?noredirect=1#comment105028760_59420913