mui / mui/base-ui

[combobox] Allow to use Suspense for async data

Open
#3,559 0 comments 1 reaction 0 assignees View on GitHub
component: combobox type: new feature
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.name}


@{user.username}
{user.title}

{user.email}



))}

);
};
```

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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.