Skip to content

Fix multiple dropdown selected value display #36136

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
brianchristopherbrady wants to merge 3 commits into
base: master
Choose a base branch
from
+46 −2
Open

Fix multiple dropdown selected value display #36136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b9633a9
fix: display multiple dropdown selections
brianchristopherbrady May 8, 2026
463c8d4
updates dropdown to use Intl.ListFormat
brianchristopherbrady May 11, 2026
6331f67
yarn change
brianchristopherbrady May 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-web-components-28a4b6f4-8db1-47a6-a43e-11e4b4d8b10f.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
Copy link
Copy Markdown

@github-actions github-actions Bot May 8, 2026 •
edited
Loading

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

"type": "patch",
"comment": "fix: allow multiple selected dropdown text to wrap",
"packageName": "@fluentui/web-components",
"email": "brianbrady@microsoft.com",
"dependentChangeType": "none"
}
35 changes: 33 additions & 2 deletions packages/web-components/src/dropdown/dropdown.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,10 +117,41 @@ export const Default: Story = {
};

export const MultipleSelection: Story = {
render: renderComponent(html<StoryArgs<FluentDropdown>>`
<fluent-field ?disabled="${story => story.disabled}">
<label slot="label">${story => story.placeholder}</label>
<fluent-dropdown
slot="input"
appearance="${story => story.appearance}"
?disabled="${story => story.disabled}"
?multiple="${story => story.multiple}"
?required="${story => story.required}"
name="${story => story.name}"
size="${story => story.size}"
id="${story => story.id}"
placeholder="${story => story.placeholder}"
type="${story => story.type}"
style="width: 280px"
${ref('dropdown')}
>
<fluent-listbox>${repeat(story => story.slottedContent?.(), optionTemplate)}</fluent-listbox>
</fluent-dropdown>
</fluent-field>
`),
args: {
...Default.args,
multiple: true,
placeholder: 'Select fruits',
placeholder: 'Best pet',
slottedContent: () => [
{ selected: true, value: 'cat', slottedContent: () => 'Cat' },
{ selected: true, value: 'dog', slottedContent: () => 'Dog' },
{ selected: true, value: 'fish', slottedContent: () => 'Fish' },
{ selected: true, value: 'hamster', slottedContent: () => 'Hamster' },
{ selected: true, value: 'snake', slottedContent: () => 'Snake' },
{ selected: true, value: 'bird', slottedContent: () => 'Bird' },
{ selected: true, value: 'wolf', slottedContent: () => 'Wolf' },
{ selected: true, value: 'beetle', slottedContent: () => 'Beetle' },
{ selected: true, value: 'squirrel', slottedContent: () => 'Squirrel' },
],
},
};

Expand Down
6 changes: 6 additions & 0 deletions packages/web-components/src/dropdown/dropdown.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,11 @@ export const styles = css`
cursor: pointer;
}
:host([multiple]) ::slotted(button) {
min-width: 0;
white-space: normal;
}
::slotted(input) {
cursor: text;
}
Expand All @@ -122,6 +127,7 @@ export const styles = css`
aspect-ratio: 1;
color: ${colorNeutralForeground3};
display: inline-flex;
flex-shrink: 0;
justify-content: center;
width: 20px;
}
Expand Down
Loading