cunningham
cunningham copied to clipboard
Add async mode to Select
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 :)