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