Improvements for iTwin Select/Combobox component

[UnseenMadness]

Feature

Hello!

We need to have select field with the search functionality in a few places in Synchro Control. So iTwin Combobox meets our requirements to replace our component with iTwin but there are some issues that are described further. We have some Selects with search functionality and possibility of custom rendering for selected fields and menu items (see Examples). All these requirements can be followed by iTwin Select component because it contains selectedItemRenderer and itemRenderer props to override rendering methods. But Select doesn’t support search functionality. Search functionality is supported by iTwin Combobox component but it doesn’t support custom rendering on selected field and menu items. Could supporting of custom renderings be added to Combobox (like in Select component) or could supporting of search functionality be added to Select (like in Combobox component)?

Examples

Selected field rendering:

Menu items rendering (show tooltips only on truncated text):

[mayank99]

Thanks for the issue!

I think we could easily add itemRenderer in ComboBox for the MenuItems. That part is fine. 👍

However, it's going to be tough to display in the <input /> when the menu is collapsed.

@gretanausedaite Since you're already researching (for Select) the best/popular practices for displaying custom content overlaying the <input />, maybe your findings would help here?

I see that downshift-js doesn't allow much flexibility for combobox but it does for select. And it does make sense too.

@FlyersPh9 What do you think from a UX perspective? With some hacks, we could force the <input /> part of ComboBox to show extra things (like icons, sublabels, trailing text, etc), but it would look really weird once the user starts typing because the currently typed text does not immediately correspond to a menu item.

That's the reason our example has an inconsistency between how the selected value and the menu item are displayed.

[UnseenMadness]

Thanks for your answer!

The Select on our side from the example is implemented in that way: if menu collapsed custom renderer is used and if it is expanded input is used

[FlyersPh9]

@FlyersPh9 What do you think from a UX perspective? With some hacks, we could force the <input /> part of ComboBox to show extra things (like icons, sublabels, trailing text, etc), but it would look really weird once the user starts typing because the currently typed text does not immediately correspond to a menu item.

That's the reason our example has an inconsistency between how the selected value and the menu item are displayed.

I agree with those concerns. We do not want content shift as things load in. For example, as the combobox loads in the flag icon or a secondary line of text. We could leave extra padding to the left to accommodate the flag icon once it's loaded in, but I'm not sure the secondary line of text would work without content shift or without making the select extremely tall. Placing text right aligned (like the string example above) I think could be doable though, may be tough with really long strings as we'd have to consider truncation.

[mayank99]

@UnseenMadness We added a new itemRenderer prop to ComboBox in 1.32.0 which should help hopefully. I doubt we're going to offer a way to customize the look of the input field anytime soon.