[combobox] Allow to use Suspense for async data
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
# Feature request
Since React19 now officially supports async operations via the `use` hook I would suggest a better API for selectable components such as `combobox` and `select`.
The main idea & change is that every prop that has impact on the items (e.g. `items` array) is not applied to the `Root` component, instead those things are managed by one or more child components.
Here is a StachBlitz with the API I have envisioned: https://stackblitz.com/run?file=src%2FApp.tsx,src%2FuseLoadUsers.ts
```js
export default function ExampleAsyncSingleCombobox() {
const id = React.useId();
const { usersPromise, getSearchSuggestions } = useLoadUsers();
return (
{
getSearchSuggestions(nextSearchValue);
}}
>
Loading
}>
);
}
function SuspendedUsers({
usersPromise,
}) {
const users = usersPromise ? React.use(usersPromise) : [];
return (
{users.length === 0 && (
Empty
)}
{users.map((user) => (
@{user.username}
{user.title}
))}
);
};
```
As you can see the `Combobox.List` is wrapped by `Suspense` and the suspense fallback is `Combobox.Status` which indicates a loading state. In this case the `items` management could be done by the `Combobox.List` component or by the individual `Combobox.Item` components.
I believe this kind of API would make it very simple to use async items & errors in all components which allow the user to pick something from a source.
Alternatively this could also be achieved by an internal abstraction, so that the `items` props in the `Combobox.Root` component also accepts a promise.
## Motivation
I believe this is the "intended" way of handling async data in react.
Contributor guide
Assessment
This issue has not been assessed yet.