[ToolbarSelect]: No Reliable Way to Identify Selected Option

[codefactor]

Bug Description

The ui5-toolbar-select component provides no reliable, documented way to identify which option was selected in the change event. The change event provides e.detail.selectedOption, but this is an internal ui5-option element created by the component, not the original ui5-toolbar-select-option.

Key issues:

1. ui5-toolbar-select-option has no value property (unlike ui5-option)
2. Custom data-* attributes on ui5-toolbar-select-option are not accessible from e.detail.selectedOption
3. Using textContent matching fails when multiple options have the same text
4. The only working approach relies on data-ui5-external-action-item-index, an internal implementation detail

This makes it impossible to associate metadata with options in a reliable way.

Affected Component

ui5-toolbar-select, ui5-toolbar-select-option

Expected Behaviour

Developers should be able to reliably identify which option was selected and access associated metadata. Similar to how ui5-select works with ui5-option which has a value property, ui5-toolbar-select-option should provide a way to identify options beyond their text content.

Proposed solutions (not mutually exclusive):

1. Pass through data-* attributes - Ensure all data-* attributes on ui5-toolbar-select-option are copied to the internal ui5-option element, making them accessible via e.detail.selectedOption.dataset
2. Add value property - Add a value property to ui5-toolbar-select-option (like ui5-option has) and pass it through to the internal option
3. Return original element - Change e.detail.selectedOption to return the ui5-toolbar-select-option element instead of the internal ui5-option
4. Add new event detail field - Keep e.detail.selectedOption as is, but add e.detail.selectedToolbarOption that references the original ui5-toolbar-select-option

Isolated Example

https://stackblitz.com/edit/js-xllyvuxz?file=index.js

Steps to Reproduce

1. Open https://stackblitz.com/edit/js-xllyvuxz?file=index.js
2. Look at the first ToolbarSelect - it has options with data-filter-id attributes
3. Click on the first ToolbarSelect and select a different option (e.g., "Inactive Items")
4. Observe the output box below showing:
   • dataset: {} is empty - the data-filter-id attribute is not accessible
   • value: undefined - no value property exists
   • Only textContent is available, which is unreliable
5. Scroll down to the second ToolbarSelect with duplicate "Pending" options
6. Select the second "Pending" option (the one for urgent pending items)
7. Observe the output showing text matching incorrectly identifies it as the first "Pending"
8. The only working approach uses data-ui5-external-action-item-index, an undocumented internal attribute

Log Output, Stack Trace or Screenshots

See the StackBlitz console output which shows:

// e.detail.selectedOption properties:
{
  textContent: "Active Items",
  value: undefined,
  dataset: {} // Empty! Cannot access data-filter-id
}

Priority

High

UI5 Web Components Version

2.21.0

Browser

Chrome

Operating System

All

Additional Context

Business Impact:
This issue affects any application using ui5-toolbar-select for filtering or navigation where options need to carry metadata beyond their display text. Common use cases:

• Table filters with query parameters
• Navigation menus with route objects
• Action toolbars where options trigger different operations

Current Workaround:
We're forced to use text matching (e.detail.selectedOption.textContent), which:

• Breaks with duplicate option text
• Is fragile (whitespace, localization changes break it)
• Cannot handle non-unique display names

Real-world scenario from SAP SuccessFactors:
We have table filters where "Pending" appears twice with different parameters:

• "Pending" → {status: "pending"}
• "Pending" (urgent) → {status: "pending", urgent: true}

Text matching always selects the first "Pending", making the second option unusable.

Related Code:

• ToolbarSelect.ts line 204-209: Uses data-ui5-external-action-item-index internally but this isn't public API
• ToolbarSelectOption.ts: Has no value property, only selected and text
• Select.ts: The underlying ui5-select works correctly because ui5-option has a value property

Comparison with similar components:

• ui5-select + ui5-option: Works correctly, ui5-option has value property
• ui5-toolbar-select + ui5-toolbar-select-option: Broken, no value property

Organization

SuccessFactors

Declaration

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