Skip to content

fix(web-components): limit multi-select dropdown trigger width with overflow count#36015

Open
brianchristopherbrady wants to merge 1 commit intomasterfrom
user/brianbrady/dropdown-multiple-sizing-bug
Open

fix(web-components): limit multi-select dropdown trigger width with overflow count#36015
brianchristopherbrady wants to merge 1 commit intomasterfrom
user/brianbrady/dropdown-multiple-sizing-bug

Conversation

@brianchristopherbrady
Copy link
Copy Markdown
Contributor

Previous Behavior

In fluent-dropdown with multiple selection enabled, the trigger button displays all selected option labels joined together (e.g. "Apple, Banana, Cherry"). As more options are selected, this string grows unbounded, causing the trigger to expand in width and break fixed-width layouts.

New Behavior

When two or more options are selected in multiple mode, the trigger now displays the first selected option's text followed by an overflow count: "Apple +2". This keeps the trigger visually stable regardless of how many options are selected.

Single-select and combobox behavior are unchanged.

Related Issue(s)

  • Fixes #

Screenshots

(before):
image

(after):
image

@brianchristopherbrady brianchristopherbrady requested a review from a team as a code owner April 20, 2026 18:02
@github-actions
Copy link
Copy Markdown

📊 Bundle size report

✅ No changes found

@github-actions
Copy link
Copy Markdown

Pull request demo site: URL

@@ -159,6 +159,10 @@ export class BaseDropdown extends FASTElement {
return displayValue;
Copy link
Copy Markdown

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/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 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/MenuList. - RTL.normal.chromium_1.png 39083 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
vr-tests-web-components/TextInput 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/TextInput. - Dark Mode.normal.chromium_1.png 288 Changed

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.

[Bug]: Dropdown, when selecting multiple options input field width grows as options are selected

1 participant