Item Label Generator for Combo Box

[Artur-]

Describe your motivation

It is quite common that you want to show something else in the combobox than exactly what is in the data object, aka format the label.

ComboBox has ${comboBoxRenderer(this.renderer, [])} you can use to render something else in the popup but that is for another use case - rendering something more complex in the dropdown.

The use case here is e.g. that the data object contains a Java class name and you want to render the simple name (name without package) in the combobox. Both in the dropdown and in the field. You want it to act like there would be a property in the data object containing the simple class name, but without actually creating that property

Describe the solution you'd like

Add an itemLabelGenerator which is reponsible for rendering the item label in all places and make the default implementation use itemLabelPath, i.e.

web-components/packages/combo-box/src/vaadin-combo-box-mixin.js

Lines 736 to 740 in e751f87

	let label = item && this.itemLabelPath ? get(this.itemLabelPath, item) : undefined;
	if (label === undefined || label === null) {
	label = item ? item.toString() : '';
	}
	return label;

Describe alternatives you've considered

No response

Additional context

No response

[tomivirkki]

Workaround:

<vaadin-combo-box
  .items=${items.map((item) => ({ ...item, shortName: createShortName(item) }))}
  item-label-path="shortName"
></vaadin-combo-box>