ListView should not handle the arrow keys if there is a modifier applied (#30633)

* ListView should not handle the arrow keys if there is a modifier applied.

* lint

* Reduce nesting

src/components/utils/ListView.tsx

@@ -184,7 +184,12 @@ export function ListView<Item, Context = any>(props: IListViewProps<Item, Contex
 
             // Guard against null/undefined events and modified keys which we don't want to handle here but do
             // at the settings level shortcuts(E.g. Select next room, etc )
-            if (e || !isModifiedKeyEvent(e)) {
+            // Guard against null/undefined events and modified keys
+            if (!e || isModifiedKeyEvent(e)) {
+                onKeyDown?.(e);
+                return;
+            }
+
             if (e.code === Key.ARROW_UP && currentIndex !== undefined) {
                 scrollToItem(currentIndex - 1, false);
                 handled = true;
@@ -206,7 +211,6 @@ export function ListView<Item, Context = any>(props: IListViewProps<Item, Contex
                 scrollToItem(Math.max(currentIndex - numberDisplayed, 0), false, `start`);
                 handled = true;
             }
-            }
 
             if (handled) {
                 e.stopPropagation();

test/unit-tests/components/views/utils/ListView-test.tsx

@@ -195,6 +195,53 @@ describe("ListView", () => {
             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 = [