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 95f6ab55811..772c1b60644 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 @@ -252,6 +252,46 @@ describe("calcite-action-menu", () => { expect(actions[2].getAttribute(activeAttr)).toBe(null); }); + it("should handle ArrowDown navigation with disabled/hidden items", 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"); + const trigger = await page.find(`calcite-action-menu >>> .${CSS.defaultTrigger}`); + + expect(await actionMenu.getProperty("open")).toBe(false); + + await actionMenu.callMethod("setFocus"); + await page.waitForChanges(); + + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + + expect(await trigger.getProperty("active")).toBe(true); + expect(await actionMenu.getProperty("open")).toBe(true); + expect(actions[0].getAttribute(activeAttr)).toBe(null); + expect(actions[1].getAttribute(activeAttr)).toBe(null); + expect(actions[2].getAttribute(activeAttr)).toBe(""); + expect(actions[3].getAttribute(activeAttr)).toBe(null); + + await page.keyboard.press("ArrowDown"); + await page.waitForChanges(); + + expect(actions[0].getAttribute(activeAttr)).toBe(null); + expect(actions[1].getAttribute(activeAttr)).toBe(null); + expect(actions[2].getAttribute(activeAttr)).toBe(null); + expect(actions[3].getAttribute(activeAttr)).toBe(""); + }); + it("should handle ArrowUp navigation", async () => { const page = await newE2EPage({ html: html` 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 368663e2b47..d24fd9f4ddd 100755 --- a/packages/calcite-components/src/components/action-menu/action-menu.tsx +++ b/packages/calcite-components/src/components/action-menu/action-menu.tsx @@ -419,7 +419,7 @@ export class ActionMenu implements LoadableComponent { [] ); - this.actionElements = actions; + this.actionElements = actions.filter((action) => !action.disabled && !action.hidden); }; isValidKey(key: string, supportedKeys: string[]): boolean {