Skip to content

Fix multiple dropdown selected value display#36136

Open
brianchristopherbrady wants to merge 3 commits into
masterfrom
user/brianbrady/dropdown-handling-multiple-options
Open

Fix multiple dropdown selected value display#36136
brianchristopherbrady wants to merge 3 commits into
masterfrom
user/brianbrady/dropdown-handling-multiple-options

Conversation

@brianchristopherbrady
Copy link
Copy Markdown
Contributor

@brianchristopherbrady brianchristopherbrady commented May 8, 2026

Summary

Updates the Fluent UI web-components Dropdown multiple-selection layout so the selected value text can wrap when the dropdown is constrained, while preserving the existing localized Intl.ListFormat display behavior.

Changes

  • Allows multiple-selection dropdown button text to wrap instead of clipping in constrained layouts.
  • Keeps the dropdown indicator from shrinking when selected text wraps.
  • Updates the multiple-selection Storybook example to use the Best pet scenario with the width constraint applied directly to fluent-dropdown.

Validation

  • Verified the multiple-selection Storybook scenario displays the selected pet values in a constrained dropdown and wraps the trigger text.
  • node .yarn/releases/cli.js nx run web-components:type-check
  • node .yarn/releases/cli.js nx run vr-tests-web-components:type-check

Screenshot

Multiple selected dropdown values wrapping in constrained dropdown

@brianchristopherbrady brianchristopherbrady requested a review from a team as a code owner May 8, 2026 20:30
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 8, 2026

📊 Bundle size report

✅ No changes found

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 8, 2026

Pull request demo site: URL

Comment thread packages/web-components/src/listbox/listbox.ts Outdated
@@ -0,0 +1,7 @@
{
Copy link
Copy Markdown

@github-actions github-actions Bot May 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-web-components/MenuList 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/MenuList. - RTL.2nd selected.chromium.png 17 Changed
vr-tests-web-components/MenuList. - RTL.1st selected.chromium_2.png 39384 Changed
vr-tests-web-components/MenuList. - RTL.2nd selected.chromium_3.png 38816 Changed

Comment thread packages/web-components/src/dropdown/dropdown.base.ts Outdated
Comment thread packages/web-components/src/dropdown/dropdown.styles.ts
Comment thread packages/web-components/src/dropdown/dropdown.stories.ts
@chrisdholt chrisdholt requested a review from radium-v May 12, 2026 07:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants