Skip to content

Add async mode to Select #286

@NathanVss

Description

@NathanVss

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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions