[EuiComboBox] Allow rendering icon for the chosen option

[mbondyra]

This is the use case we have for Lens. We generate the Icon list, but the selected Item doesn't show the preview of the icon.

Could we somehow enable it, either by adding a custom renderSelectedOption prop or specifically passing icon inside selectedOptions?

[elizabetdev]

Hi @mbondyra,

A pattern that we've been using in our Elastic products is to show the selected icon in a prepend.

You can take a look at the code on the following CodeSandbox: https://codesandbox.io/s/icon-selection-with-euicombobox-qe384.

I think this solution works but is not ideal and obvious for EUI consumers. So not sure this feature request is something that we want to allow in EuiComboBox or to provide a search functionality in EuiSuperSelect. @chandlerprall and @thompsongl might know better what's the future plan for these components.

Also because this is a pattern that our consumers normally search we should consider adding it to our documentation.

[mbondyra]

Oh wow, I think it will work great for our case! @MichaelMarcialis, could you confirm we are ok with the icon in prepend? In that case I'll add it to the PR. Thank you @miukimiu!

[MichaelMarcialis]

Thanks @miukimiu and @mbondyra! I just now saw that Maps uses this pattern for their icon selector. I'm good with adopting this approach in Lens as well.

[cchaos]

This is also a duplicate of #2358, but since the screenshot in that issue is broken and this one at least indicates a current workaround, I'll close the old one. I do think we should consider building in a custom render option to the component at some point, so we should keep this open. Probably capture it during the EuiSelectable conversion and to match EuiSuperSelect.

[github-actions[bot]]

👋 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.

[MichaelMarcialis]

Still valid

[JasonStoltz]

Closing in favor of https://github.com/elastic/eui/issues/2358