Value labels are lost when options are loading asynchronously

[oluckyman]

Consider example:
You have a multi-select with async options.

• User clicks on placeholder and now the input is focused
• User types "a" keystroke.
• asyncOptions are loading options for query "a"

this.state.options == [ { value: 1, label: 'AAA' }, { value: 2, label: 'AAB' } ]

• User selects from the list option AAA
• value become value: "1"
• Input contains selected option [AAA] and input is focused
• User types "z" keystroke.
• asyncOptions are loading options for query "z"

this.state.options == [ { value: 9, label: 'ZZZ' } ]

• User selects from the list option ZZZ
• value become value: "1,9"

And now the initValuesArray called with value = [1, 9] and options = [ { value: 9, label: 'ZZZ' } ]
So it can resolve label for value 9 but can’t resolve label for value 1. And as a result user has [1] [ZZZ] instead of [AAA] [ZZZ] in the input.

[CesarLanderos]

also dealing with this :/

[Amdingo]

+1, I'm trying to dig through it a bit but wanted you to be aware that it is continuing.

ABSOLUTELY AMAZING module though, So happy that I found this before hacking out my own attempt.

[CesarLanderos]

fixed this like a moth ago or so, i had 2 selects, simple selects (not multi), and well, 2 different api calls (different kind of catalog), the first one was working just right, and the second wasn't, turns out the first one was able to receive an id and retrieve the element, and i forgot to add that functionality to the second catalog service.

i notice that every time you select an item, react-select makes a new call to the catalog service but now with an id (or value), if the back end responds with an array with an element with that value, it works, if it does not exist there, it displays the value instead of the label, which is weird because i expected to use the catalog (array) that the react-select component already had containing the selected value with its label.

hope it helps you!.

[jonathanasquier]

It might not be related, but I'm struggling with redux rerendering my form on async value selection.

If I select a value from the initial list loaded, it works fine, but if I make a search and select a value that was not in the initial list loaded, the form receives new props and resets the list, loosing my selection.

How can I overcome that?

Should I create a new issue?

Thanks!

[CesarLanderos]

Sorry if i did not understand, so when you select an item after a search, the selects renders as if nothing was selected?, or, it renders the value instead of the label?

[jonathanasquier]

the selects renders as if nothing was selected ONLY if the selected value wasn't in the initial loaded list, when the components mounts for the first time.

If I just choose a value directly from the list loaded on mount, it works fine.
But if I make async filtering and load new values, it won't.

The value is properly set in the state, but the Select.Async appears as empty, as the options list resets and the selected value is not part of it.

[jonathanasquier]

I ended up reduxing the behaviour of a simple Select.
I dispatch an action that makes the async call onInputChange.
The same dispatch is triggered on componentDidMount either with an empty string to populate the options array, or with the current form value if the form is already populated, and I think this is the part missing in Select.Async.

I could have reduxed the isLoading prop to completely match Select.Async's behaviour but I didn't.

[Austio]

@oluckyman I was running into the same issue with multiselect values disappearing. To get around the issue in setState i save the value

handleSelectChange(value, optionsList) {
  this.setState({ value, optionsList });
}

This holds the value and the option dictionary associated with the selected elements.

Then in my async call i concat that value

axios.post('/back-office/api/search', { q: query, take: 10 })
  .then((response) => response.concat(this.state.optionsList))
  .then((concatResponse) => callback(null, { options: concatResponse }));

@jonathanasquier I also use redux but was on 0.9 and didn't have Select.Async yet. I just disconnected this portion from redux

[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