diff --git a/change/@microsoft-fast-foundation-903a969b-3de3-4090-974a-3423344c571c.json b/change/@microsoft-fast-foundation-903a969b-3de3-4090-974a-3423344c571c.json
new file mode 100644
index 00000000000..18310ef14b1
--- /dev/null
+++ b/change/@microsoft-fast-foundation-903a969b-3de3-4090-974a-3423344c571c.json
@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "Fix focus issue when clicking on an element in the toolbar",
+ "packageName": "@microsoft/fast-foundation",
+ "email": "20542556+mollykreis@users.noreply.github.com",
+ "dependentChangeType": "prerelease"
+}
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index f29f1958b48..7b6bd2bcbf0 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -2093,8 +2093,6 @@ export class FASTToolbar extends FASTElement {
childItems: Element[];
// (undocumented)
protected childItemsChanged(prev: undefined | Element[], next: Element[]): void;
- // @internal
- clickHandler(e: MouseEvent): boolean | void;
// @internal (undocumented)
connectedCallback(): void;
// @internal
@@ -2103,6 +2101,8 @@ export class FASTToolbar extends FASTElement {
focusinHandler(e: FocusEvent): boolean | void;
// @internal
keydownHandler(e: KeyboardEvent): boolean | void;
+ // @internal
+ mouseDownHandler(e: MouseEvent): boolean | void;
orientation: ToolbarOrientation;
// @internal
protected reduceFocusableElements(): void;
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 9416924b333..e450ad5770d 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
@@ -418,4 +418,65 @@ test.describe("Toolbar", () => {
await expect(element).toHaveJSProperty("activeIndex", 2);
});
+
+ test("should focus most recently focused item when toolbar receives focus", async () => {
+ await root.evaluate(node => {
+ node.innerHTML = /* html */ `
+
+
+
+
+
+
+
+
+
+
+ `;
+ });
+ const button2 = element.locator("button", { hasText: "Button 2" });
+
+ const buttonOutsideToolbar = page.locator("button", { hasText: "Button Outside Toolbar"});
+
+ await button2.click();
+ await expect(button2).toBeFocused();
+
+ await buttonOutsideToolbar.click();
+ await expect(buttonOutsideToolbar).toBeFocused();
+
+ await element.focus();
+
+ await expect(button2).toBeFocused();
+ });
+
+ test("should focus clicked item when focus enters toolbar by clicking an item that is not the most recently focused item", async () => {
+ await root.evaluate(node => {
+ node.innerHTML = /* html */ `
+
+
+
+
+
+
+
+
+
+
+ `;
+ });
+ const button2 = element.locator("button", { hasText: "Button 2" });
+
+ const button3 = element.locator("button", { hasText: "Button 3" });
+
+ const buttonOutsideToolbar = page.locator("button", { hasText: "Button Outside Toolbar"});
+
+ await button2.click();
+ await expect(button2).toBeFocused();
+
+ await buttonOutsideToolbar.click();
+ await expect(buttonOutsideToolbar).toBeFocused();
+
+ await button3.click();
+ await expect(button3).toBeFocused();
+ });
});
diff --git a/packages/web-components/fast-foundation/src/toolbar/toolbar.template.ts b/packages/web-components/fast-foundation/src/toolbar/toolbar.template.ts
index bb391f43864..29766c2884f 100644
--- a/packages/web-components/fast-foundation/src/toolbar/toolbar.template.ts
+++ b/packages/web-components/fast-foundation/src/toolbar/toolbar.template.ts
@@ -24,7 +24,7 @@ export function toolbarTemplate(
aria-orientation="${x => x.orientation}"
orientation="${x => x.orientation}"
role="toolbar"
- @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
+ @mousedown="${(x, c) => x.mouseDownHandler(c.event as MouseEvent)}"
@focusin="${(x, c) => x.focusinHandler(c.event as FocusEvent)}"
@keydown="${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}"
${children({
diff --git a/packages/web-components/fast-foundation/src/toolbar/toolbar.ts b/packages/web-components/fast-foundation/src/toolbar/toolbar.ts
index 98fcf9fcff5..df230a91063 100644
--- a/packages/web-components/fast-foundation/src/toolbar/toolbar.ts
+++ b/packages/web-components/fast-foundation/src/toolbar/toolbar.ts
@@ -121,7 +121,7 @@ export class FASTToolbar extends FASTElement {
*
* @internal
*/
- public clickHandler(e: MouseEvent): boolean | void {
+ public mouseDownHandler(e: MouseEvent): boolean | void {
const activeIndex = this.focusableElements?.findIndex(x =>
x.contains(e.target as HTMLElement)
);