Async Select resetting options on first load

[nadjiel]

I was using the AsyncCreatableSelect for a project of mine and I noticed a behavior I'm not quite sure is the expected to happen and neither if there's a quick and easy fix or workaround for it.

The behavior is related to searching asynchronous options. As the video below shows, when I type a string to search, the previous options are shown, being updated with the new result only once the async call returns a result.

What I find weird is how during the first input search (i.e. when I type the first letter in the input), the options that are already displayed at that point (which are the ones returned by the first automatic search, caused by defaultOptions being set to true) simply disappear, and the component only shows options again once the promise resolves.

Personally, I think this isn't the greatest way to handle this UX-wise because it prevents the user from choosing any options previously available while the search executes, so I made a workaround myself, but that required pretty much rewriting the async logic using the plain CreatableSelect as a base.

I'd like to know if this behavior is intentional or if it's something that's going to be worked on at some point. If that's the case, I could create an issue and maybe contribute to solve it.

options-disappearing-on-initial-search.mp4

Here's my code snippet, by the way:

const options = [
    { label: "Risotto", value: "risotto" },
    { label: "Sandwich", value: "sandwich" },
    { label: "Rice", value: "rice" },
    { label: "Beans", value: "beans" },
    { label: "Donut", value: "donut" },
  ] as const;

function search(text: string, search: string): boolean {
  return text.trim().toLowerCase().includes(search.toLowerCase());
}

<AsyncCreatableSelect
  loadOptions={
    (inputValue) => new Promise((resolve) => {
      setTimeout(() => resolve(
        options.filter(o => search(o.label, inputValue))
      ), 1000)
    })
  }
  value={value}
  defaultOptions
  cacheOptions
/>