Ignoring status during popup[data-closed] and popup[data-ending-style]
- 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:

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
Assessment
This issue has not been assessed yet.