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);
}