Fix multiple dropdown selected value display

change/@fluentui-web-components-28a4b6f4-8db1-47a6-a43e-11e4b4d8b10f.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix: display multiple selected dropdown options",
+  "packageName": "@fluentui/web-components",
+  "email": "brianbrady@microsoft.com",
+  "dependentChangeType": "none"
+}

packages/web-components/src/dropdown/dropdown.base.ts

@@ -151,7 +151,10 @@ export class BaseDropdown extends FASTElement {
         style: 'narrow',
       });
 
-    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(', ')
+      : this.listFormatter.format(selectedOptions.map(x => x.text));
     toggleState(this.elementInternals, 'placeholder-shown', !displayValue);
 
     if (this.isCombobox) {

packages/web-components/src/dropdown/dropdown.spec.ts

@@ -55,6 +55,43 @@ test.describe('Dropdown', () => {
     await expect(button).toHaveCount(1);
   });
 
+  test('should display comma-separated selected options when multiple options are initially selected', async ({
+    fastPage,
+  }) => {
+    const { element } = fastPage;
+    const button = element.locator('button');
+
+    await fastPage.setTemplate(/* html */ `
+      <fluent-dropdown multiple>
+        <fluent-listbox>
+          <fluent-option>Option 1</fluent-option>
+          <fluent-option selected>Option 2 (Selectable)</fluent-option>
+          <fluent-option selected>Option 3 (Selectable)</fluent-option>
+        </fluent-listbox>
+      </fluent-dropdown>
+    `);
+
+    await expect(button).toHaveText('Option 2 (Selectable), Option 3 (Selectable)');
+  });
+
+  test('should update the comma-separated selected options display when selecting multiple options', async ({
+    fastPage,
+  }) => {
+    const { element } = fastPage;
+    const button = element.locator('button');
+
+    await fastPage.setTemplate({ attributes: { multiple: true } });
+
+    await element.click();
+    await element.locator('fluent-option[value=banana]').click();
+
+    await expect(button).toHaveText('Banana');
+
+    await element.locator('fluent-option[value=orange]').click();
+
+    await expect(button).toHaveText('Banana, Orange');
+  });
+
   test('should render an input when the type attribute is set to "combobox"', async ({ fastPage }) => {
     const { element } = fastPage;
     const input = element.locator('input');

packages/web-components/src/dropdown/dropdown.stories.ts

@@ -118,9 +118,20 @@ export const Default: Story = {
 
 export const MultipleSelection: Story = {
   args: {
-    ...Default.args,
     multiple: true,
-    placeholder: 'Select fruits',
+    placeholder: 'Best pet',
+    slot: 'input',
+    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' },
+    ],
   },
 };
 

packages/web-components/src/dropdown/dropdown.styles.ts

@@ -111,6 +111,11 @@ export const styles = css`
     cursor: pointer;
   }
 
+  :host([multiple]) ::slotted(button) {
+    min-width: 0;
+    white-space: normal;
+  }
+
   ::slotted(input) {
     cursor: text;
   }
@@ -122,6 +127,7 @@ export const styles = css`
     aspect-ratio: 1;
     color: ${colorNeutralForeground3};
     display: inline-flex;
+    flex-shrink: 0;
     justify-content: center;
     width: 20px;
   }

packages/web-components/src/listbox/listbox.ts

@@ -83,7 +83,23 @@ export class Listbox extends FASTElement {
     next?.forEach((option, index) => {
       option.elementInternals.ariaPosInSet = `${index + 1}`;
       option.elementInternals.ariaSetSize = `${next.length}`;
+
+      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();
+    }
   }
 
   /**