Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add async mode to Select #286

Open
NathanVss opened this issue Mar 4, 2024 · 0 comments
Open

Add async mode to Select #286

NathanVss opened this issue Mar 4, 2024 · 0 comments
Assignees

Comments

@NathanVss
Copy link
Member

NathanVss commented Mar 4, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants