fix(action-menu): clicking an action menu item should call click even…

…t. (#8627)

**Related Issue:** #8577 #8628

## Summary

- This reverts commit ccfbd0c.
- Adds test

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,14 +429,14 @@ 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);
     });
 
-    it("should click the active action and close the menu", async () => {
+    it("should click the active action on Enter key and close the menu", async () => {
       const page = await newE2EPage({
         html: html`<calcite-action-menu>
           <calcite-action id="first" text="Add" icon="plus" text-enabled></calcite-action>
@@ -466,9 +466,44 @@ describe("calcite-action-menu", () => {
       expect(actions[2].getAttribute(activeAttr)).toBe(null);
 
       await page.keyboard.press("Enter");
+      await page.waitForChanges();
+
+      expect(await actionMenu.getProperty("open")).toBe(false);
+      expect(clickSpy).toHaveReceivedEventTimes(1);
+    });
+
+    it("should click the active action when clicked and close the menu", 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> `,
+      });
 
       await page.waitForChanges();
 
+      const actionMenu = await page.find("calcite-action-menu");
+      const actions = await page.findAll("calcite-action");
+
+      expect(await actionMenu.getProperty("open")).toBe(false);
+
+      await actionMenu.callMethod("setFocus");
+      await page.waitForChanges();
+
+      await page.keyboard.press("ArrowDown");
+      await page.waitForChanges();
+
+      const clickSpy = await actions[0].spyOnEvent("click");
+
+      expect(await actionMenu.getProperty("open")).toBe(true);
+      expect(actions[0].getAttribute(activeAttr)).toBe("");
+      expect(actions[1].getAttribute(activeAttr)).toBe(null);
+      expect(actions[2].getAttribute(activeAttr)).toBe(null);
+
+      // native click is used to close the open menu
+      await page.$eval("calcite-action", (el: HTMLCalciteActionElement) => el.click());
+
       expect(await actionMenu.getProperty("open")).toBe(false);
       expect(clickSpy).toHaveReceivedEventTimes(1);
     });

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