React-select unexpected async behavior - reactjs

Question

There is an unexpected behavior with the react-selectcomponent.
I have it set up to load external json to populate the list.
<Select.Async
name="cf_search"
value=""
autoload={false}
cache={false}
ignoreAccents={false}
loadOptions={this.handleCFSearch}
onChange={this.handleSelectCFName}
/>
handleCFSearch = (input) => {
let term = encodeURIComponent(input);
return fetch(`${AppGlobal.baseBackend}/PersAddo/autocompleteSearch/${term}.json`)
.then((response) => {
if(response.ok) {
return response.json();
}
throw new Error('Network response was not ok.');
}).then((json) => {
console.log(json);
let values = json.result.map((element) => {
return {
value: element.pers_id,
label: element.first_name + ' ' + element.last_name
}
});
return { options: values };
});
}
The server script handles the search term and returns an array with the names in JSON.
It works just fine but in some cases it doesn't work.
If I search 'morten twe' the result from the server shows up in the select.
However if I search 'morte twe' (just one character less in the first name) the list does not show up and the select box just looks like not results.
I have tested both search terms and they both return exactly the same JSON:
{
"result": [
{
"pers_id": 123456,
"first_name": "Morten",
"last_name": "Twellmann"
}
]
}
So why doesn't anything show up when the server returns the data correctly?

Answer 1

react-select does some client-side filtering by default. So even though your API is returning the value, react-select filters it out. The default filter implementation it uses can be found here . You can see the filterOptions prop being called here in Select.js, which Async utilizes.
The default filtering is basically just checking for substring, case-insensitive equality. In the case where the value is not shown, there is a difference between the search and the result, so it is filtered out.
You can provide your own filterOptions function to override the default, or just pass undefined to turn off the clientside filtering altogether.