diff --git a/change/@microsoft-fast-foundation-2ada25c3-3fb4-48ba-893d-e64d11f7f095.json b/change/@microsoft-fast-foundation-2ada25c3-3fb4-48ba-893d-e64d11f7f095.json new file mode 100644 index 00000000000..b88d36dc993 --- /dev/null +++ b/change/@microsoft-fast-foundation-2ada25c3-3fb4-48ba-893d-e64d11f7f095.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Fix bug in toolbar click handler when a slotted element has child elements", + "packageName": "@microsoft/fast-foundation", + "email": "20542556+mollykreis@users.noreply.github.com", + "dependentChangeType": "prerelease" +} diff --git a/packages/web-components/fast-foundation/src/toolbar/toolbar.pw.spec.ts b/packages/web-components/fast-foundation/src/toolbar/toolbar.pw.spec.ts index 2090ec378ae..9416924b333 100644 --- a/packages/web-components/fast-foundation/src/toolbar/toolbar.pw.spec.ts +++ b/packages/web-components/fast-foundation/src/toolbar/toolbar.pw.spec.ts @@ -349,4 +349,73 @@ test.describe("Toolbar", () => { await expect(element).toHaveJSProperty("activeIndex", 0); }); + + test("should update activeIndex when an element within the toolbar is clicked", async () => { + await root.evaluate(node => { + node.innerHTML = /* html */ ` + + + + + + + + `; + }); + + const button2 = element.locator("button", { hasText: "Button 2" }); + + const startSlotButton = element.locator("button", { + hasText: "Start Slot Button", + }); + + await element.focus(); + + await expect(startSlotButton).toBeFocused(); + + await expect(element).toHaveJSProperty("activeIndex", 0); + + await button2.click(); + + await expect(button2).toBeFocused(); + + await expect(element).toHaveJSProperty("activeIndex", 2); + }); + + test("should update activeIndex when a nested element within the toolbar is clicked", async () => { + await root.evaluate(node => { + node.innerHTML = /* html */ ` + + + + + + + + `; + }); + + const button2 = element.locator("button", { hasText: "Button 2" }); + + const button2InnerContent = button2.locator("div"); + + const startSlotButton = element.locator("button", { + hasText: "Start Slot Button", + }); + + await element.focus(); + + await expect(startSlotButton).toBeFocused(); + + await expect(element).toHaveJSProperty("activeIndex", 0); + + await button2InnerContent.click(); + + await expect(button2).toBeFocused(); + + await expect(element).toHaveJSProperty("activeIndex", 2); + }); }); diff --git a/packages/web-components/fast-foundation/src/toolbar/toolbar.ts b/packages/web-components/fast-foundation/src/toolbar/toolbar.ts index 6701e26cd89..98fcf9fcff5 100644 --- a/packages/web-components/fast-foundation/src/toolbar/toolbar.ts +++ b/packages/web-components/fast-foundation/src/toolbar/toolbar.ts @@ -122,7 +122,9 @@ export class FASTToolbar extends FASTElement { * @internal */ public clickHandler(e: MouseEvent): boolean | void { - const activeIndex = this.focusableElements?.indexOf(e.target as HTMLElement); + const activeIndex = this.focusableElements?.findIndex(x => + x.contains(e.target as HTMLElement) + ); if (activeIndex > -1 && this.activeIndex !== activeIndex) { this.setFocusedElement(activeIndex); }