[fix]: occasionally focusing off of dropdown would open and focus listbox (microsoft#34404)

Author: eljefe223

change/@fluentui-web-components-b69763ac-ed99-4cf6-b84f-0745eed2d5f6.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "occasionally focusing off of combobox would open and focus listbox",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -221,6 +221,7 @@ export class BaseDropdown extends FASTElement {
     if (next) {
       next.dropdown = this;
       next.popover = 'manual';
+      next.tabIndex = -1;
       this.listboxSlot.assign(next);
       const notifier = Observable.getNotifier(this);
       notifier.subscribe(next);

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

@@ -500,4 +500,15 @@ test.describe('Dropdown', () => {
 
     await expect(element.locator('fluent-option[value=kiwi]')).toHaveJSProperty('selected', true);
   });
+
+  test('should not focus listbox when tabbing from dropdown', async ({ fastPage, page }) => {
+    const { element } = fastPage;
+
+    const listbox = element.locator('fluent-listbox');
+
+    await element.focus();
+    await page.keyboard.press('Tab');
+
+    await expect(listbox).toBeHidden();
+  });
 });

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

@@ -36,7 +36,7 @@ const dropdownTemplate = html<StoryArgs<FluentDropdown>>`
 
 const storyTemplate = html<StoryArgs<FluentDropdown>>`
   <fluent-field ?disabled="${story => story.disabled}">
-    <label slot="label"> <fluent-label required>${story => story.placeholder}</fluent-label></label>
+    <label slot="label">${story => story.placeholder}</label>
     <fluent-dropdown
       slot="input"
       appearance="${story => story.appearance}"