[EuiComboBox] Allow custom render of selected items

[cchaos]

Right now the combobox allows you to pass a custom render for the options in the list but you can't replicate that render in the input itself when an option is selected.

Example: Icon list

It would be very beneficial to also show the icon in the input.

Both Maps and Graph use this icon selection technique.

[cchaos]

cc @flash1293 @nreese

[cchaos]

We discussed this, and the best way to handle it is to use the same render method as provided for the options (if possible, have to look at the code) or just provide another custom render method for the selected option.

[chandlerprall]

I think we'll want to add a custom rendering function to this - naively reusing the existing renderOption in our docs renders as

There is another level of effort here as the rendered content will need to be processed (e.g. with EuiInnerText) to pass it in as the iconOnClickAriaLabel.

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[flash1293]

Bump - this is still valid.

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[nreese]

Bump - this is still valid.

[tilman]

This issue is now open for 2 years. Is there any work planned or workaround avalaible?

[cchaos]

Closing this old issue in favor of #5628 which contains working screenshots and a workaround until we can solve it internally.

[JasonStoltz]

Reopening as this is more representative of the work we'd like to do, rather than #5628

[cee-chen]

An update on the approach taken for this issue. Based on the requested use-cases, we've decided to resolve this request (made by @shahzad31 and other Elastic teams) via copying EuiSelectable's option.prepend and option.append API (see docs).

The largest reason for this is because EuiComboBox is eventually going to adopt EuiSelectable under the hood (see #2841) for accessibility. The closer we can get to EuiSelectable's existing API, the easier that migration will be. Additionally, adopting existing APIs and patterns leads to a more consistent developer experience and is generally preferable over introducing one-offs where possible.

All the mentioned Kibana use cases have primarily been around adding icon rendering, which prepend/append nodes should easily solve. If in the future, consumers truly need a totally custom render method for EuiComboBox's pills, we can revisit that choice at that point (in a new issue). However, I want to add my 2c that if that does happen, we should likely prefer to add a new renderPill API rather than bogarting renderOption. This is so consumers currently using renderOption don't suddenly and unexpectedly see a change in their pill rendering without them changing any props.