feat(ui5-comobobox, ui5-multi-combobox): add custom items#13640
Open
Vonahz wants to merge 19 commits into
Open
feat(ui5-comobobox, ui5-multi-combobox): add custom items#13640Vonahz wants to merge 19 commits into
Vonahz wants to merge 19 commits into
Conversation
Sample sync reminderHTML sample changed but React sample (
Please keep both samples in sync, or ignore if the change does not apply to both. |
…combobox_custom_items
|
🚀 Deployed on https://pr-13640--ui5-webcomponents-preview.netlify.app |
…combobox_custom_items
…combobox_custom_items
…bcomponents into combobox_custom_items
nnaydenow
reviewed
Jun 10, 2026
nnaydenow
reviewed
Jun 10, 2026
| * Used for filtering, autocomplete, and mobile rendering. | ||
| * @default undefined | ||
| * @public | ||
| */ |
Contributor
There was a problem hiding this comment.
do we need that? is it going to be used for the token and as a value in the input?
Contributor
Author
There was a problem hiding this comment.
Yes. It is used for the token and if value is not provided, input value fallbacks to the "text" property.
…combobox_custom_items
nikoletavnv
requested changes
Jun 12, 2026
Contributor
|
On mobile, the matching item does not have the selected blue state. For standard items and for desktop the item looks selected (blue background) when you start typing and the item is auto-completed, but for the combo-box custom item the selected style is missing on phone. Screen.Recording.2026-06-15.124844.mp4 |
nikoletavnv
reviewed
Jun 15, 2026
…combobox_custom_items
| /** | ||
| * @class | ||
| * The `ui5-cb-item-custom` is a combobox item component | ||
| * that can be used to place custom content in the combobox item. |
Contributor
There was a problem hiding this comment.
Suggested change
| * that can be used to place custom content in the combobox item. | |
| * that allows placing custom content inside a combobox item. |
| * @class | ||
| * The `ui5-cb-item-custom` is a combobox item component | ||
| * that can be used to place custom content in the combobox item. | ||
| * The text property is used for filtering and auto-complete. |
Contributor
There was a problem hiding this comment.
Suggested change
| * The text property is used for filtering and auto-complete. | |
| * The `text` property is used for filtering and auto-complete. |
| * The `ui5-cb-item-custom` is a combobox item component | ||
| * that can be used to place custom content in the combobox item. | ||
| * The text property is used for filtering and auto-complete. | ||
| * In case the user needs highlighting functionality, check "@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js" |
Contributor
There was a problem hiding this comment.
Suggested change
| * In case the user needs highlighting functionality, check "@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js" | |
| * For highlighting functionality, see `@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js`." |
|
|
||
| /** | ||
| * Defines the value of the component. | ||
| * Used for programmatic selection via selectedValue property. |
Contributor
There was a problem hiding this comment.
Suggested change
| * Used for programmatic selection via selectedValue property. | |
| * Used for programmatic selection via the `selectedValue` property. |
| /** | ||
| * @class | ||
| * The `ui5-mcb-item-custom` is a multi-combobox item component | ||
| * that can be used to place custom content in the multi-combobox item. |
Contributor
There was a problem hiding this comment.
Suggested change
| * that can be used to place custom content in the multi-combobox item. | |
| * that hat allows placing custom content inside a multi-combobox item. |
| * @class | ||
| * The `ui5-mcb-item-custom` is a multi-combobox item component | ||
| * that can be used to place custom content in the multi-combobox item. | ||
| * The text property is used for filtering and token display. |
Contributor
There was a problem hiding this comment.
Suggested change
| * The text property is used for filtering and token display. | |
| * The `text` property is used for filtering and token display. |
| * The `ui5-mcb-item-custom` is a multi-combobox item component | ||
| * that can be used to place custom content in the multi-combobox item. | ||
| * The text property is used for filtering and token display. | ||
| * In case the user needs highlighting functionality, check "@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js" |
Contributor
There was a problem hiding this comment.
Suggested change
| * In case the user needs highlighting functionality, check "@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js" | |
| * For highlighting functionality, see "@ui5/webcomponents-base/dist/util/generateHighlightedMarkup.js" |
|
|
||
| ### Custom Items with Rich Content | ||
| Use `ui5-cb-item-custom` to create custom item templates with complex layouts, multiple icons, images, or any HTML content. | ||
| This allows you to build rich, visually appealing dropdown items beyond the standard text and additional-text format. |
Contributor
There was a problem hiding this comment.
Suggested change
| This allows you to build rich, visually appealing dropdown items beyond the standard text and additional-text format. | |
| This allows you to build rich, visually appealing dropdown items beyond the standard text and `additional-text` format. |
nikoletavnv
approved these changes
Jun 17, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
JIRA: BGSOFUIRILA-4141
Fixes: #11731
Introduces
ui5-cbi-customandui5-mcbi-customto enable custom content in ComboBox and MultiComboBox items.