cunningham icon indicating copy to clipboard operation
cunningham copied to clipboard

Add async mode to Select

Open NathanVss opened this issue 1 year ago • 0 comments

Our main goal is to be able to load Select's options asynchronously, currently all options must be loaded before displaying the select, which does not fit use cases with large datasets, such as user search, etc ...

Here is a proposal for the api of the Select component in order to perform async loading:

<Select
  label="User search"
  name="user_id"
  searchable={true}
  options={async (context) => {
    const response = await fetch("/api/users?search=" + context.search);
    const data = await response.json();
    return data.map((user: any) => ({
      label: user.name,
      value: user.id,
    }));
  }}
/>

It should work for both mono and multi searchable select

The options prop should now accept both :

  • An array of options
  • A async function which return the options

As the Select is a quite complicated component based on Downshift and includes many features, this feature could be a tough to implement

Feel free to contribute and to suggests ideas :)

NathanVss avatar Mar 04 '24 09:03 NathanVss