The dropdown menu closes in multiselect mode after option selection

[muntamala]

When running the react-select in a website running on localhost the select component works as expected when in multiselect mode. That is options dropdown is present after option selection. However when running the same site as hosted in heroku o when running the live demo the dropdown closes after option selection. I did some debugging and it seems that the setTimeout function for focusing the input node after option selection doesn't seem to work as expected.

[MalcolmDwyer]

I've noticed this too on my local build after recently upgrading several tools and libraries. There is some change in the react-select behavior because of differences in gulp / webpack / node used in my build process. I'm still hammering away with git bisect and various fiddling with my build environment trying to isolate the difference. When I narrow it down, I'll post again.

At first I assumed it was based on upgrading to the latest react-select, but I think I've ruled that out (unfortunately... since that would be easy to track down).

Is anyone else seeing this?

[vanik08]

I've had the same issue while building with WebPack

[MalcolmDwyer]

I'm trying out 1.0.0-beta6 (up from 0.6.x, and then 0.9.1). With 1.0.0-beta6 the problem has disappeared. Now I just have to figure out if I can deal with all the other changes in 1.0 while keeping my custom option tokenizer working.

[seanmcl]

I have this issue as well. Verified it's fixed in 1.0.0-beta6. But the update breaks my select components in spectacular and puzzling ways. Rolling back.

[ropsiu]

Struggling with same issue @ 1.0.0-beta14. Anyone else?

[luisfuertes]

I have the same issue in localhost.

"react-select": "^1.0.0-rc.2" and "react": "^15.3.2"

After first option selected, loadOptions function continue working but dont render the callback options.

My loadOptions function:

  _fetchResults(text, callback){
    console.log("text: ", text)

    const obj = {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
            'authorization': 'Bearer ' + this.props.token}
        };

    return fetch(url, obj)
     .then((response) => {
       //console.log("autocomplete response: ", response)
       return response.json();
     })
    .then((responseObject) => {
      //console.log("autocomplete responseObject: ", responseObject)
      var formatResponse = []
      if(responseObject)
        formatResponse = this.props.responseObject(responseObject)

      if(formatResponse && formatResponse.length){
        if(formatResponse.length > 5)
          formatResponse = formatResponse.slice(0,5)

        console.log("formatResponse: ", formatResponse)
        callback(null, {
          options:formatResponse,
          complete: false})
      }else{
        callback(null, {options:[], complete: false})
      }
    })
    .catch((error) => {
      console.warn('autocomplete error: ', error)
      callback(null, {options:[], complete: false})
    });
  }

formatResponse has 5 values, but dont show any

[jossmac]

Version 1 of react-select is no longer supported.

In the best interest of the community we've decided to spend the time we have available on the latest version.

We apologise for any inconvenience.

Please see:

1. v1 to v2 upgrade guide
2. v1 documentation and examples