Skip to content

Commit

Permalink
fix(action-menu): Filter hidden or disabled actions via keyboard. (#8336
Browse files Browse the repository at this point in the history
)

**Related Issue:** #8337

## Summary

- Filter out hidden and disabled actions from keyboard navigation
- Add test
  • Loading branch information
driskull authored Dec 5, 2023
1 parent d4e98be commit 11c0007
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -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`<calcite-action-menu>
<calcite-action hidden id="first" text="Add" icon="plus" text-enabled></calcite-action>
<calcite-action disabled id="second" text="Add" icon="minus" text-enabled></calcite-action>
<calcite-action id="third" text="Add" icon="banana" text-enabled></calcite-action>
<calcite-action id="fourth" 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");
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`<calcite-action-menu>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down

0 comments on commit 11c0007

Please sign in to comment.