mui / mui/base-ui

Ignoring status during popup[data-closed] and popup[data-ending-style]

Open
#3,811 1 comment 0 reactions 0 assignees View on GitHub
component: combobox
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

I'm not sure if this is a question or a bug or a feature request 😂

For the async examples of both Autocomplete and Combobox, there is a `X.Status` component which is used to render information about the listbox.

None of the examples have animations, but - if they did - the issue I'm having would become obvious:
Upon selection of an item, the status becomes pending because a new value leads to a new fetch. The downside feels like both a bad seeing-eye UX and potentially confusing for a11y: The loading state renders and is visible and announced immediately upon selecting a listbox item, but before the popup's exit animation ends.

Here's an exaggerated gif (long animation time) to visualize the above:

![Image](https://github.com/user-attachments/assets/1714398d-a7da-4b57-ae7f-4fce4042be8f)

My solution with Tailwind from the popup classes was adding a `data-status` attribute on `X.Status` component:

```'data-closed:*:data-status:hidden data-ending-style:*:data-status:hidden'```

however, I wanted to suggest that somehow this idea is internalized into base-ui.

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.