mui / mui/base-ui

[combobox] Tree popups

Open
#4,489 1 comment 0 reactions 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

## Summary

Add support for tree popups in `Combobox`, or document an official composition pattern for using a tree as the popup.

The WAI-ARIA APG explicitly allows a combobox popup to be a `listbox`, `grid`, `tree`, or `dialog`:
https://www.w3.org/WAI/ARIA/apg/patterns/combobox/

The missing part is not nested rendering by itself, but support for tree-specific behavior inside the combobox popup.

## Examples in other libraries

- https://rsuitejs.com/components/tree-picker/
- https://vaadin.com/directory/component/treecombobox

## Incomplete workaround

A possible workaround is to flatten the tree, render indented `Combobox.Item`s, and use a custom filter that keeps parent items visible when a descendant matches.

That partially works, but it is still only a flat list with tree-like presentation. It does not provide real tree semantics, and match highlighting should not happen on a node that is only visible because a descendant matched.

## Motivation

This comes up for for all hierarchical selectors, esp. when breadcrumb style labeling for items starts taking too much space.

What is needed is a combobox that keeps normal combobox behavior while allowing a tree popup with the expected keyboard and accessibility semantics.

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.