fix: update combobox to handle duplicate items #5950
Conversation
|
📚 Branch Preview Links🔍 First Generation Visual Regression Test ResultsWhen a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
Deployed to Azure Blob Storage: If the changes are expected, update the |
|
The issue described is an accessibility pattern violation. each item should have a unique value AND label for the drop down. There should never be an instance where two items render the same label with different underlying values. |
nikkimk
left a comment
nikkimk
left a comment
There was a problem hiding this comment.
I have concerns about the accessibility and usability of items with identical text. Can you provide an example where this is necessary and is accessible.
| export const duplicateItemText = (): TemplateResult => { | ||
| const optionsWithDuplicates: ComboboxOption[] = [ | ||
| { value: 'val1', itemText: 'Same Display Text' }, | ||
| { value: 'val2', itemText: 'Same Display Text' }, | ||
| { value: 'val3', itemText: 'Unique Text' }, | ||
| ]; |
There was a problem hiding this comment.
This example would not be accessible as there is no way to differentiate options to the user. Is there an accessible use case you can provide for this PR instead?
| protected override handleChange(): void { | ||
| this.dispatchEvent( | ||
| new CustomEvent('change', { | ||
| bubbles: true, | ||
| composed: true, | ||
| detail: { | ||
| value: this.itemValue, | ||
| itemText: this.value, | ||
| }, | ||
| }) | ||
| ); | ||
| } | ||
|
|
There was a problem hiding this comment.
The combobox documentation should be updated to reflect this.
|
We also need to make sure this PR includes a changeset. |
Description
This PR fixes an issue in Combobox component where duplicate itemText values would cause incorrect behavior. When multiple options had the same display text but different underlying values, selecting one would always resolve to the first match.
Motivation and context
When there is a list of items, which has itemText and value. Currently, the combobox only supports the itemText to be sent to change event. So any handling needs to be done using itemText.
But is the list of items has duplicate items with same itemText and different value (uniqueId, in our case its projectId). In this case, we would need both itemText and value to be sent to the change event. So the handling can be done based on both the itemText and value, even if the itemText is same, we can use value as differentiator.
So the request here is to, expose an explicit selectedValue property would eliminate reliance on itemText uniqueness and provide a more reliable contract for downstream consumers.
#5910
Related issue(s)
Screenshots (if appropriate)
Screen.Recording.2025-12-16.at.10.54.40.PM.mov
Author's checklist
Reviewer's checklist
patch,minor, ormajorfeaturesManual review test cases
Descriptive Test Statement
Descriptive Test Statement
Device review