diff --git a/src/components/utils/ListView.tsx b/src/components/utils/ListView.tsx index b11a3d638c..b8425b366f 100644 --- a/src/components/utils/ListView.tsx +++ b/src/components/utils/ListView.tsx @@ -184,28 +184,32 @@ export function ListView(props: IListViewProps { expect(items[lastIndex]).toHaveAttribute("tabindex", "-1"); }); + it("should not handle keyboard navigation when modifier keys are pressed", () => { + renderListViewWithHeight(); + const container = screen.getByRole("grid"); + + fireEvent.focus(container); + + // Store initial state - first item should be focused + const initialItems = container.querySelectorAll(".mx_item"); + expect(initialItems[0]).toHaveAttribute("tabindex", "0"); + expect(initialItems[2]).toHaveAttribute("tabindex", "-1"); + + // Test ArrowDown with Ctrl modifier - should NOT navigate + fireEvent.keyDown(container, { code: "ArrowDown", ctrlKey: true }); + + let items = container.querySelectorAll(".mx_item"); + expect(items[0]).toHaveAttribute("tabindex", "0"); // Should still be on first item + expect(items[2]).toHaveAttribute("tabindex", "-1"); // Should not have moved to third item + + // Test ArrowDown with Alt modifier - should NOT navigate + fireEvent.keyDown(container, { code: "ArrowDown", altKey: true }); + + items = container.querySelectorAll(".mx_item"); + expect(items[0]).toHaveAttribute("tabindex", "0"); // Should still be on first item + expect(items[2]).toHaveAttribute("tabindex", "-1"); // Should not have moved to third item + + // Test ArrowDown with Shift modifier - should NOT navigate + fireEvent.keyDown(container, { code: "ArrowDown", shiftKey: true }); + + items = container.querySelectorAll(".mx_item"); + expect(items[0]).toHaveAttribute("tabindex", "0"); // Should still be on first item + expect(items[2]).toHaveAttribute("tabindex", "-1"); // Should not have moved to third item + + // Test ArrowDown with Meta/Cmd modifier - should NOT navigate + fireEvent.keyDown(container, { code: "ArrowDown", metaKey: true }); + + items = container.querySelectorAll(".mx_item"); + expect(items[0]).toHaveAttribute("tabindex", "0"); // Should still be on first item + expect(items[2]).toHaveAttribute("tabindex", "-1"); // Should not have moved to third item + + // Test normal ArrowDown without modifiers - SHOULD navigate + fireEvent.keyDown(container, { code: "ArrowDown" }); + + items = container.querySelectorAll(".mx_item"); + expect(items[0]).toHaveAttribute("tabindex", "-1"); // Should have moved from first item + expect(items[2]).toHaveAttribute("tabindex", "0"); // Should have moved to third item (skipping separator) + }); + it("should skip non-focusable items when navigating down", async () => { // Create items where every other item is not focusable const mixedItems = [