From 7c65d30e2a0670bd1318164ea2fc3afa23989831 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Tue, 26 Sep 2023 14:50:30 -0500 Subject: [PATCH] Fix bug in toolbar click handler when a slotted element has child elements (#6830) * Fix bug with nested elements in toolbar click handler * Change files * lint * update change description * slight test improvement * Update change/@microsoft-fast-foundation-2ada25c3-3fb4-48ba-893d-e64d11f7f095.json --------- Co-authored-by: Chris Holt --- ...st-foundation-2ada25c3-3fb4-48ba-893d-e64d11f7f095.json | 7 +++++++ .../web-components/fast-foundation/src/toolbar/toolbar.ts | 4 +++- 2 files changed, 10 insertions(+), 1 deletion(-) create mode 100644 change/@microsoft-fast-foundation-2ada25c3-3fb4-48ba-893d-e64d11f7f095.json 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.ts b/packages/web-components/fast-foundation/src/toolbar/toolbar.ts index 967ce7ac78f..a7182852662 100644 --- a/packages/web-components/fast-foundation/src/toolbar/toolbar.ts +++ b/packages/web-components/fast-foundation/src/toolbar/toolbar.ts @@ -132,7 +132,9 @@ export class Toolbar extends FoundationElement { * @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); }