openfun / cunningham

🎨 The Open FUN Design System
https://openfun.github.io/cunningham/
MIT License
23 stars 2 forks source link

Add async mode to Select #286

Open NathanVss opened 8 months ago

NathanVss commented 8 months ago

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 :

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 :)