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