[Feature Request]: ability to define custom template for selected option & dropdown

[marvinrohde-leanix]

Feature Request Description

We recently adopted UI5 Web Components in our (Angular) project, and with previous UI components we were able to customize the dropdown content, as well as the selected item template:

<ui-single-select>
	<div selectedOption>
		<!-- custom selected item template goes here -->
	</div>
	<div dropdownContent>
		<!-- custom dropdown template goes here -->
	</div>
</ui-single-select>	

Is this something that you envision to be supported in the dropdown components (combobox, select etc.)?

Thanks!

Proposed Solution

Something in the direction of:

<ui5-combobox>
	<div slot="selectedOption">
		<!-- custom selected item template goes here -->
	</div>
	<div slot="dropdown">
		<!-- custom dropdown template goes here -->
	</div>
</ui5-combobox>

Proposed Alternatives

No response

Organization

SAP LeanIX

Additional Context

No response

Priority

High

Privacy Policy

• I’m not disclosing any internal or sensitive information.

[dobrinyonkov]

Hello @marvinrohde-leanix,

For ui5-select, both parts are already supported:

• Custom dropdown option: use ui5-option-custom.
  https://ui5.github.io/webcomponents/components/OptionCustom/
• Custom selected display: use the label slot on ui5-select (since 1.17.0).
  https://ui5.github.io/webcomponents/components/Select/

Example:

<ui5-select>
  <div slot="label">custom selected display</div>
  <ui5-option-custom>...</ui5-option-custom>
  <ui5-option-custom>...</ui5-option-custom>
</ui5-select>

ui5-combobox has custom options (ui5-combobox-item-custom) but no equivalent slot for the input display. If the above works for you on select, we can consider adding the same to combobox. If not, please share more about your use case and why the current select API doesn't fit.

[marvinrohde-leanix]

Hi, thanks - yes such a label slot on the other 2 components would surely be helpful.

My other question was whether you envision to make the entire dropdown content a slot, so that the content is fully customizable for developers, not just the individual items.

[dobrinyonkov]

Hi @marvinrohde-leanix, thanks for the follow-up. Two separate answers.

1. Custom selected display

A label slot on ui5-combobox and ui5-multi-combobox, matching ui5-select, may be a reasonable enhancement. Routing to the ComboBox team (Rila) as its own feature request.

2. Custom entire dropdown content

Pushing back on this one, for three reasons.

• Semantics. The popover of a combobox is a bit more complex than just a list. The list is the component. The popover has role="listbox", its children have role="option" with aria-selected, and the input's aria-activedescendant points into it. That's what makes it a combobox and not an input that opens a popover. If we expose the popover body as an open slot, we can't wire keyboard navigation, we can't emit selection events with a stable item reference, and we can't detect selection at all. The only way to keep it working is to require your children to have specific roles and data attributes, which is more rules than the current API has.

• Fiori design. UI5 Web Components implement the Fiori design system. A combobox has a defined look and interaction, and consumers rely on that consistency across SAP apps. A wide-open popover slot turns every combobox into a bespoke component and breaks that guarantee.

"I want to customize the dropdown" usually means one of these. Which is yours?

• (a) Rich per-row visual — already covered by ui5-combobox-item-custom.
• (b) Header or footer in the popover ("Recent searches", "Create new…"). Not supported, worth a scoped feature request.
• (c) Rich group headers beyond the plain label on ui5-combobox-item-group. Not supported, worth a scoped feature request.
• (d) Multi-column tabular popover. Use ui5-popover + ui5-input, or ui5-table.
• (e) Something completely different inside — form, preview pane, tree. Use ui5-popover + ui5-input.

Tell us which matches and I'll point you at the API or open the right feature request.

[marvinrohde-leanix]

Thank you! I will follow up with our designer where the request came from. Fully agree with the reasons you mentioned 👍🏼

[dobrinyonkov]

Hi @UI5/ui5-team-ctr-ril,

please check this feature request for the combobox: - a label slot on ui5-combobox and ui5-multi-combobox, matching the label slot of ui5-select?

@marvinrohde-leanix, once you have more info on the second FR (point 2), consider opening another dedicated issue.

Kind Regards,
Dobrin