Fix multiple dropdown selected value display#36136
Open
brianchristopherbrady wants to merge 1 commit into
Open
Fix multiple dropdown selected value display#36136brianchristopherbrady wants to merge 1 commit into
brianchristopherbrady wants to merge 1 commit into
Conversation
📊 Bundle size report✅ No changes found |
|
Pull request demo site: URL |
chrisdholt
requested changes
May 8, 2026
Comment on lines
+87
to
+102
| if (this.dropdown) { | ||
| option.multiple = !!this.multiple; | ||
| option.disabled = option.disabledAttribute || this.dropdown.disabled; | ||
| option.name = this.dropdown.name; | ||
| } | ||
| }); | ||
|
|
||
| if (this.dropdown) { | ||
| next | ||
| ?.filter(option => option.defaultSelected) | ||
| .forEach((option, index) => { | ||
| option.selected = !!this.multiple || index === 0; | ||
| }); | ||
|
|
||
| this.dropdown.setValidity(); | ||
| } |
Member
There was a problem hiding this comment.
Is this related? It seems like the primary change here needs to be styles.
The dropdown when constrained to space wraps to another line (the intent of this PR). It seems like this could be a max-width issue either in the component or example. I'm not sure what the logic changes are here.
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -0,0 +1,7 @@ | |||
| { | |||
There was a problem hiding this comment.
🕵🏾♀️ visual changes to review in the Visual Change Report
vr-tests-web-components/Accordion 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-web-components/Accordion. - Dark Mode.normal.chromium_1.png | 3154 | Changed |
vr-tests-web-components/Badge 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-web-components/Badge. - Dark Mode.normal.chromium.png | 443 | Changed |
vr-tests-web-components/MenuList 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-web-components/MenuList. - Dark Mode.normal.chromium.png | 498 | Changed |
| vr-tests-web-components/MenuList. - RTL.2nd selected.chromium.png | 17 | Changed |
vr-tests-web-components/RadioGroup 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-web-components/RadioGroup. - Dark Mode.1st selected.chromium_2.png | 119 | Changed |
marchbox
reviewed
May 8, 2026
| const displayValue = this.listFormatter.format(this.selectedOptions.map(x => x.text)); | ||
| const selectedOptions = this.selectedOptions; | ||
| const displayValue = this.multiple | ||
| ? selectedOptions.map(x => x.text).join(', ') |
Contributor
There was a problem hiding this comment.
I think we do want to use the list formatter for multiple, joining the text with a comma and a whitespace will not work internationally.
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
3 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.
Summary
Updates web-components dropdown multiple selection so selected values are displayed as a comma-separated list and can wrap in the trigger, matching the expected visual behavior.
Changes
Validation
Cat, Dog, Fish, Hamster, Snake, Bird, Wolf, Beetle, Squirrelwith a wrapped trigger.Note: focused Yarn e2e could not run locally because this checkout currently has a Yarn workspace lockfile mismatch before tests start.
Screnshot