Triggering onSelect for tree item middle click (#2692)

* Triggering onSelect for tree item middle click * Add changeset
primer · Dec 15, 2022 · 5352bcc · 5352bcc
1 parent bce7bf4
commit 5352bcc
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 0 deletions.
diff --git a/.changeset/yellow-shoes-glow.md b/.changeset/yellow-shoes-glow.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Trigger onSelect when TreeView items are middle clicked
diff --git a/src/TreeView/TreeView.test.tsx b/src/TreeView/TreeView.test.tsx
@@ -778,6 +778,13 @@ describe('Keyboard interactions', () => {
 
       // onSelect should have been called
       expect(onSelect).toHaveBeenCalledTimes(1)
+
+      onSelect.mockClear()
+      // Press middle click
+      fireEvent.click(document.activeElement?.firstChild || document.body, {button: 1})
+
+      // onSelect should have been called
+      expect(onSelect).toHaveBeenCalledTimes(1)
     })
 
     it('toggles expanded state if no onSelect function is provided', () => {

diff --git a/src/TreeView/TreeView.tsx b/src/TreeView/TreeView.tsx
@@ -429,6 +429,11 @@ const Item = React.forwardRef<HTMLElement, TreeViewItemProps>(
                 toggle(event)
               }
             }}
+            onAuxClick={event => {
+              if (onSelect && event.button === 1) {
+                onSelect(event)
+              }
+            }}
           >
             <div style={{gridArea: 'spacer', display: 'flex'}}>
               <LevelIndicatorLines level={level} />