Revert "feat(action-menu): Close menu on blur instead of on tab key. (#…

…8577)" This reverts commit ccfbd0c. # Conflicts: # packages/calcite-components/src/components/action-menu/action-menu.e2e.ts
Esri · Jan 19, 2024 · dd68da0 · dd68da0
1 parent 0b3b66d
commit dd68da0
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 13 deletions.
diff --git a/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts b/packages/calcite-components/src/components/action-menu/action-menu.e2e.ts
@@ -402,13 +402,13 @@ describe("calcite-action-menu", () => {
       expect(await trigger.getProperty("active")).toBe(false);
     });
 
-    it.skip("should close on blur", async () => {
+    it.skip("should handle TAB navigation", async () => {
       const page = await newE2EPage({
         html: html`<calcite-action-menu>
-            <calcite-action id="first" text="Add" icon="plus" text-enabled></calcite-action>
-            <calcite-action id="second" text="Add" icon="minus" text-enabled></calcite-action>
-            <calcite-action id="third" text="Add" icon="banana" text-enabled></calcite-action> </calcite-action-menu
-          ><button>test</button>`,
+          <calcite-action id="first" text="Add" icon="plus" text-enabled></calcite-action>
+          <calcite-action id="second" text="Add" icon="minus" text-enabled></calcite-action>
+          <calcite-action id="third" text="Add" icon="banana" text-enabled></calcite-action>
+        </calcite-action-menu> `,
       });
 
       await page.waitForChanges();
@@ -429,8 +429,8 @@ describe("calcite-action-menu", () => {
       expect(actions[1].getAttribute(activeAttr)).toBe(null);
       expect(actions[2].getAttribute(activeAttr)).toBe(null);
 
-      const button = await page.find("button");
-      await button.focus();
+      await page.keyboard.press("Tab");
+
       await page.waitForChanges();
 
       expect(await actionMenu.getProperty("open")).toBe(false);

diff --git a/packages/calcite-components/src/components/action-menu/action-menu.tsx b/packages/calcite-components/src/components/action-menu/action-menu.tsx
@@ -224,7 +224,6 @@ export class ActionMenu implements LoadableComponent {
 
     menuButtonEl.addEventListener("pointerdown", this.menuButtonClick);
     menuButtonEl.addEventListener("keydown", this.menuButtonKeyDown);
-    menuButtonEl.addEventListener("blur", this.menuButtonBlur);
   };
 
   disconnectMenuButtonEl = (): void => {
@@ -236,7 +235,6 @@ export class ActionMenu implements LoadableComponent {
 
     menuButtonEl.removeEventListener("pointerdown", this.menuButtonClick);
     menuButtonEl.removeEventListener("keydown", this.menuButtonKeyDown);
-    menuButtonEl.removeEventListener("blur", this.menuButtonBlur);
   };
 
   setMenuButtonEl = (event: Event): void => {
@@ -419,10 +417,6 @@ export class ActionMenu implements LoadableComponent {
     return !!supportedKeys.find((k) => k === key);
   }
 
-  private menuButtonBlur = (): void => {
-    this.open = false;
-  };
-
   menuButtonKeyDown = (event: KeyboardEvent): void => {
     const { key } = event;
     const { actionElements, activeMenuItemIndex, open } = this;
@@ -443,6 +437,11 @@ export class ActionMenu implements LoadableComponent {
       action ? action.click() : this.toggleOpen(false);
     }
 
+    if (key === "Tab") {
+      this.open = false;
+      return;
+    }
+
     if (key === "Escape") {
       this.toggleOpen(false);
       event.preventDefault();