fix(web-components): Dropdown opens and immediately closes on space key interaction (#33767)

Author: radium-v

change/@fluentui-web-components-8e320b35-61fc-4ce1-839f-b5f03a85aa8d.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: dropdown opens then closes on space key",
+  "packageName": "@fluentui/web-components",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -72,6 +72,16 @@ test.describe('Dropdown', () => {
     await expect(listbox).toBeHidden();
   });
 
+  test('should open the dropdown when the space key is pressed', async ({ fastPage }) => {
+    const { element } = fastPage;
+    const listbox = element.locator('fluent-listbox');
+    const button = element.locator('[role=combobox]');
+
+    await button.press(' ');
+
+    await expect(listbox).toBeVisible();
+  });
+
   test("should set the `name` property on options when it's set on the dropdown", async ({ fastPage }) => {
     const { element } = fastPage;
     const options = element.locator('fluent-option');

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

@@ -725,6 +725,8 @@ export class BaseDropdown extends FASTElement {
         if (this.isCombobox) {
           break;
         }
+
+        e.preventDefault();
       }
 
       case 'Enter':