[EuiComboBox] Rebuild with EuiSelectable
- Dominant language
- TypeScript
- Stars
- 6.4k
- Forks
- 911
- Avg merge
- 2d 11h
- Merged PRs (30d)
- 65
Description
The existing EuiComboBox has a few a11y shortcomings and differs in implementation from EuiSelectable which has been crowned as the future implementation of dropdown-like things. To consolidate implementations of similar components, fix the a11y problems, and unify the UX, EuiComboBox should be rewritten using EuiSelectable.
On top of EuiSelectable, EuiComboBox largely provides:
1. A clear button (which needs improved contrast from what's there today)
Picture example
(should be 4.5:1)
2. Buttons with the selected items inside the search field
3. A dropdown view of the results instead of inline
Which currently has a minor a11y issue associated with it (#5024)
Popup indicator should be excluded from focus order (Under "Keyboard Interaction" for Combobox)
I think the EUI team prefers to keep the EuiComoboBox component and to wrap EuiSelectable within it but another implementation option is to add a "renderAs" prop (or something along those lines) to EuiSelectable to adjust styling.
This replaces Kibana issues [#42988](https://github.com/elastic/kibana/issues/42988) and [#39357](https://github.com/elastic/kibana/issues/39357)
This issue fixes:
- [x] https://github.com/elastic/eui/issues/5951
- [x] https://github.com/elastic/kibana/issues/27749
- [x] https://github.com/elastic/kibana/issues/136527
- [x] https://github.com/elastic/eui/issues/7712
Contributor guide
Assessment
This issue has not been assessed yet.