Async resets the available options after selecting and loses the selected value

If I use the Async component to load a large filterable data source that retuns a limited amount of items, the component may lose track of the selected option (and available filters) when the user selects one.

The following CodeSandbox shows the issue:

https://lxlxj5w87q.codesandbox.io/

https://codesandbox.io/s/lxlxj5w87q

In this CodeSandbox, I created a dummy datasource that generates strings “Item 0” through “Item 9999”, filters such strings using the input provided by the loadOptions callback, and finally, limits the results to 10 items. This data source tries to mimic an API that searches a database.

I have used this data source in two scenarios:

• A “simple” scenario: A controlled Async select;
• Integrated with tcomb-form, which was my original use case for this component.

Both scenarios have the Async component (either directly or via tcomb-form) and a label showing the current value.

Use cases:

• If the user selects any option that can be initially loaded, the component works as expected, calling the onChange callback with the provided option and showing the selected value.
• However, if the user searches for 50, and selects any option, while the onChange callback is correct, the component “loses” the selected option and reloads the initial list. This seems to apply for any selected option that is not between “Item 0” and “Item 9”.

I also noticed that, when an option is selected, the loadOptions callback is called with an empty string as the term. This causes the data source to return the original list (which may not contain the selected option). If this is intended behaviour, is there a way to disable it?

After debugging for a bit it seems that loadOptions is called when the option is selected because the filter text changes.

What I did to work around this (with tcomb-form) is have my data fetching function also receive the current value (as well as the term) and have it use the value if the term is not provided. This, however, feels like a hack.

[yozi-developer]

@RedRoserade , I’ve run into this issue too and have found out this thread: https://github.com/JedWatson/react-select/issues/2004

[dhffdh]

add

onFocus={this.handleFocus}

 handleFocus = () => {
    const { selectedOption } = this.state;
    if (selectedOption && selectedOption.label) {
      this.setState({ inputValue: selectedOption.label });
    }
  };