Async with getOptionValue

I’d like to use React Select library so that a user could select one option. API server stores available options. API request argument is a prefix and the server responses with a list of options (array of strings) matching the given prefix.

So I’m using Async component. Because the server responses with an array of strings, I define component’s props getOptionValue and getOptionLabel as {d => d}.

Labels in the menu are shown as expected, but the problem is that when I select some option, the menu just closes and no option seems to be selected.

You can see this behavior in https://codesandbox.io/s/reactcodesandboxerexample-j1xxh , code is in file example.js. API request is replaced by creating Promise.

I tried to map fetched options to objects with properties value and label so that I don’t have to override getOptionValue and getOptionLabel, but this mapping takes a huge amount of time (several seconds), because number of fetched options may be in thousands.

Does anybody have an idea how could I fix this buggy behavior in React Select, so that I could see the selected option?

[Klinton90]

I think, we need better documentation explaining how getOptionValue is used. I just tested couple scenarios with Select and list of objects as options:

• defaultValue - needs to be an object in order to find and select option in list. I expected (at least other libraries work that way): in order to preselect value each option is compared as defaultValue === getOptionValue(option)
• value - same logic - always needs to be an object, instead of some property…

My usecase:

• options is list of Objects (e.g. Author in format {id: number, name: string})
• I need to select Authors for the Book. Book is {id: number, name: string, authorIds: number[]}

[ebonow]

In an effort to close out stale issues, I will be closing this. Please feel free to reply if you have any concerns or questinos and this can be reopened if necessary.