[EuiComboBox] Rebuild with EuiSelectable

[myasonik]

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 (Remove EuiComboBox down arrow button from tab order #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 and #39357

[thompsongl]

As part of this work, also mark EuiFilterSelectItem for deprecation (See #5387)

[cee-chen]

To add more requested context, EuiSelectable has the best built-in accessibility by far (semantic HTML, keyboard navigation, screen reader announcements) and we should dogfood that a11y instead of rewriting it for the 4+ selection components we use. In this case, EuiComboBox has several reported a11y and perf issues (in the github mentions history - see above) that would likely be resolved by this refactor.

[github-actions]

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.

[JasonStoltz]

Just a quick update. We're putting a 3 month window on completing this issue. I believe it should also solve the following issues:

#7289
#5951
elastic/kibana#27749
elastic/kibana#136527
#7712

EDIT: I think we'll be targeting 8.16 for this one.

[legrego]

EDIT: I think we'll be targeting 8.16 for this one.

Hey @JasonStoltz, is a target of 8.16 still the goal for this issue?

[cee-chen]

Apologies all that I never got around to this. It's been a very hot minute since I looked at either component, but before I go, I'll try to summarize what I recall were the blockers or setup steps needed to move towards this.

1. EuiSelectable needs to be updated to support isCaseSensitive to match EuiComboBox (right now, searching is never case sensitive)
   • I had a very preliminary spike of this here if that helps at all for reference, but I don't recommend trying to cherry-pick it or closely follow it - the optionMatcher feature (feat: Add optionMatcher prop to EuiSelectable and EuiComboBox components #7709) has created too many diffs
2. EuiSelectable's search input needs to be customized a lot to fit EuiComboBox's very custom input (both the multi select badges and single selection mode).
   • It might not even make sense to use EuiSelectable's render prop input at all, but instead figure out some way of passing a custom input to EuiSelectable and having it use that ref/node instead.
3. EuiSelectable currently does not have any OOTB focus UX for list usage in an EuiInputPopover, which EuiComboBox has in spades (e.g. refocusing search on popover close, etc.). There will need to be some amount of work to get UX parity there, possibly in EuiInputPopover itself.
   • I'm not sure if I'm remembering this correctly, but some amount of compromise in EuiComboBox's current focus and/or keyboard behavior may have to be made as it currently has some gaps in a11y behavior.
   • I have what looks like a very investigatory spike here of that work - no guarantees of how useful it is however, as it was very WIP with no git history or commit message 😅
   • See also [docs] Add example of EuiSelectable in an EuiInputPopover #7683 for more context there
4. EuiComboBox's onCreateOption behavior doesn't exist at all in EuiSelectable - I'm not sure how much modification to EuiSelectable itself will be necessary to accommodate that. Hopefully very little (other than passing an onBlur or on enter keypress callback), and most of that logic can remain in EuiComboBox.
5. The EuiFilterSelectItem component should be fully removed once EuiComboBox's options list has been updated to use EuiSelectable's list.

There's probably more than just the above list that will only become apparent once the work for this begins, but starting at the top of the list and working down is probably the way to go. The biggest dev/architectural effort will almost certainly be bullet point 2., as EuiComboBox's input/form control is hands down the most custom/involved thing about it (compared to EuiSelectable)