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

[brianchristopherbrady]

Component

Other...

Package version

3.0.0-rc.9

@microsoft/fast-element version

^2.10.2

Environment

System:
    OS: Windows 11
    CPU: (62 GB) AMD Ryzen 9 8945HS w/ Radeon 780M Graphics
    Memory: 62 GB
  Binaries:
    Node: 22.22.2
    Yarn: 4.12.0
  Browsers:
    Edge: 147.0.3912.72
  npmPackages:
    @fluentui/web-components: 3.0.0-rc.9 => 3.0.0-rc.9
    @microsoft/fast-element: ^2.10.2 => 2.10.2

Current Behavior

When multiple is set on fluent-dropdown and the user selects more than one option, the trigger displays all selected option labels as a comma-separated string (e.g. "Apple, Banana, Cherry"). Each additional selection appends to this string, causing the trigger to grow in width unboundedly and break fixed-width layouts.

Expected Behavior

The trigger should remain a stable, fixed width regardless of how many options are selected. Rather than expanding to fit the full list of selected labels, the trigger should show a compact summary — such as the first selected option followed by an overflow count (e.g. "Apple +2") — to communicate the number of selections without affecting layout.

Reproduction

https://stackblitz.com/edit/vitejs-vite-xog9yixu?file=src%2Fmain.ts

Steps to reproduce

1. Open @fluentui/web-components storybook or this stackblitz: https://stackblitz.com/edit/vitejs-vite-xog9yixu?file=src%2Fmain.ts
2. Ensure the dropdown has the multiple attribute set
3. Select multiple options
4. Observe input resizing

Are you reporting an Accessibility issue?

None

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

ILDC FABRIC PLATFORM

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.