feat(ui5-comobobox, ui5-multi-combobox): add custom items#13640
feat(ui5-comobobox, ui5-multi-combobox): add custom items#13640Vonahz wants to merge 17 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
| * Used for filtering, autocomplete, and mobile rendering. | ||
| * @default undefined | ||
| * @public | ||
| */ |
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?
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
| /** | ||
| * @class | ||
| * The `ui5-cb-item-custom` is type of combobox item, | ||
| * that can be used to place combobox items with custom content in the combobox. |
There was a problem hiding this comment.
"that can be used to place custom content in the combobox item.
The text property is used for filtering and auto-complete."
| <> | ||
| <CheckBox | ||
| disabled={this._readonly} | ||
| checked={this.selected} |
There was a problem hiding this comment.
The "selected" property is deprecated. We should probably decide based on whether the current item value is among the selectedValues collection
| * Defines the selected state of the component. | ||
| * @default false | ||
| * @public | ||
| * @deprecated Set the `value` property on items and use the `selectedValues` property on the parent `ui5-multi-combobox` instead for programmatic selection. |
There was a problem hiding this comment.
Do not introduce deprecated property. The selected property is kept for compatibility reasons in the ComboBoxItem but in the new classes we should not use it
| tag: "ui5-mcb-item-custom", | ||
| template: MultiComboBoxItemCustomTemplate, | ||
| styles: [ComboBoxItemCustom.styles, styles], | ||
| dependencies: [...ComboBoxItemCustom.dependencies, CheckBox], |
There was a problem hiding this comment.
We don't need the dependencies declaration for the JSX renderer. It was used for the old handlebars templates
|
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 |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>ComboBox Custom Items</title> | ||
| </head> | ||
| <body style="background-color: var(--sapBackgroundColor); padding: 2rem;"> |
There was a problem hiding this comment.
Add some height to the body - e.g. height: 250px for the combobox popover to expand and show more than 1 item
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>MultiComboBox Custom Items</title> | ||
| </head> | ||
| <body style="background-color: var(--sapBackgroundColor); padding: 2rem;"> |
There was a problem hiding this comment.
Add height: 250px to the body tag for the sample
3 participants
JIRA: BGSOFUIRILA-4141
Fixes: #11731
Introduces
ui5-cbi-customandui5-mcbi-customto enable custom content in ComboBox and MultiComboBox items.