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
index d03377f5fda..00ad89a867e 100755
--- 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`
-
-
- `,
+
+
+
+ `,
});
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`
@@ -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`
+
+
+
+ `,
+ });
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);
});
diff --git a/packages/calcite-components/src/components/action-menu/action-menu.tsx b/packages/calcite-components/src/components/action-menu/action-menu.tsx
index 39ed53d0237..4d57ddcfd30 100755
--- 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();