[TreeView] Fix Cursor navigation interferes with browser shortcut keys (

#14798)
mui · Oct 2, 2024 · 588deea · 588deea
1 parent 82b7df2
commit 588deea
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 0 deletions.
diff --git a/...rc/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.test.tsx b/...rc/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.test.tsx
@@ -178,6 +178,19 @@ describeTreeView<
         expect(view.getFocusedItemId()).to.equal('1');
       });
 
+      it('should not change focus if ctrl is pressed', () => {
+        const view = render({
+          items: [{ id: '1', children: [{ id: '1.1' }] }],
+          defaultExpandedItems: ['1'],
+        });
+
+        act(() => {
+          view.getItemRoot('1').focus();
+        });
+        fireEvent.keyDown(view.getItemRoot('1'), { key: 'ArrowRight', ctrlKey: true });
+        expect(view.getFocusedItemId()).to.equal('1');
+      });
+
       it('should move the focus to the first child if the focus is on an open item', () => {
         const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],
@@ -232,6 +245,19 @@ describeTreeView<
         expect(view.isItemExpanded('1')).to.equal(false);
       });
 
+      it('should not change focus if ctrl is pressed', () => {
+        const view = render({
+          items: [{ id: '1', children: [{ id: '1.1' }] }],
+          defaultExpandedItems: ['1'],
+        });
+
+        act(() => {
+          view.getItemRoot('1.1').focus();
+        });
+        fireEvent.keyDown(view.getItemRoot('1.1'), { key: 'ArrowLeft', ctrlKey: true });
+        expect(view.getFocusedItemId()).to.equal('1.1');
+      });
+
       it("should move focus to the item's parent if the focus is on a child item that is a leaf", () => {
         const view = render({
           items: [{ id: '1', children: [{ id: '1.1' }] }],

diff --git a/...view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts b/...view/src/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.ts
@@ -182,6 +182,9 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
       // If the focused item is expanded, we move the focus to its first child
       // If the focused item is collapsed and has children, we expand it
       case (key === 'ArrowRight' && !isRtl) || (key === 'ArrowLeft' && isRtl): {
+        if (ctrlPressed) {
+          return;
+        }
         if (instance.isItemExpanded(itemId)) {
           const nextItemId = getNextNavigableItem(instance, itemId);
           if (nextItemId) {
@@ -199,6 +202,9 @@ export const useTreeViewKeyboardNavigation: TreeViewPlugin<
       // If the focused item is expanded, we collapse it
       // If the focused item is collapsed and has a parent, we move the focus to this parent
       case (key === 'ArrowLeft' && !isRtl) || (key === 'ArrowRight' && isRtl): {
+        if (ctrlPressed) {
+          return;
+        }
         if (canToggleItemExpansion(itemId) && instance.isItemExpanded(itemId)) {
           instance.toggleItemExpansion(event, itemId);
           event.preventDefault();