[cherry-pick] Fix two toolbar focus issues (#6851)

* 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 <[email protected]> * Fix toolbar focus bug (#6836) * Fix focus issue when clicking on an element in the toolbar * remove describe.only * Change files * Update api-report.md * Update change/@microsoft-fast-foundation-903a969b-3de3-4090-974a-3423344c571c.json --------- Co-authored-by: Chris Holt <[email protected]> * update change files * revert unintended change --------- Co-authored-by: Chris Holt <[email protected]>
microsoft · Oct 25, 2023 · 507d2fe · 507d2fe
1 parent 21f8185
commit 507d2fe
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 5 deletions.
diff --git a/change/@microsoft-fast-foundation-903a969b-3de3-4090-974a-3423344c571c.json b/change/@microsoft-fast-foundation-903a969b-3de3-4090-974a-3423344c571c.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix focus issues with toolbar",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
@@ -2620,8 +2620,6 @@ export class Toolbar extends FoundationElement {
     childItems: Element[];
     // (undocumented)
     protected childItemsChanged(prev: undefined | Element[], next: Element[]): void;
-    // @internal
-    clickHandler(e: MouseEvent): boolean | void;
     // @internal (undocumented)
     connectedCallback(): void;
     // @internal
@@ -2630,6 +2628,8 @@ export class Toolbar extends FoundationElement {
     focusinHandler(e: FocusEvent): boolean | void;
     // @internal
     keydownHandler(e: KeyboardEvent): boolean | void;
+    // @internal
+    mouseDownHandler(e: MouseEvent): boolean | void;
     orientation: Orientation;
     // @internal
     protected reduceFocusableElements(): void;

diff --git a/packages/web-components/fast-foundation/src/toolbar/toolbar.template.ts b/packages/web-components/fast-foundation/src/toolbar/toolbar.template.ts
@@ -19,7 +19,7 @@ export const toolbarTemplate: FoundationElementTemplate<
         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
@@ -131,8 +131,10 @@ export class Toolbar extends FoundationElement {
      *
      * @internal
      */
-    public clickHandler(e: MouseEvent): boolean | void {
-        const activeIndex = this.focusableElements?.indexOf(e.target as HTMLElement);
+    public mouseDownHandler(e: MouseEvent): boolean | void {
+        const activeIndex = this.focusableElements?.findIndex(x =>
+            x.contains(e.target as HTMLElement)
+        );
         if (activeIndex > -1 && this.activeIndex !== activeIndex) {
             this.setFocusedElement(activeIndex);
         }