navigator: handle middle-click behavior

packages/core/src/browser/tree/tree-widget.tsx

@@ -243,6 +243,11 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
                 }),
             ]);
         }
+        this.node.addEventListener('mousedown', (event: MouseEvent) => {
+            if (event.button === 1) {
+                event.preventDefault();
+            }
+        });
         this.toDispose.pushAll([
             this.model,
             this.model.onChanged(() => this.updateRows()),
@@ -924,6 +929,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
             style,
             onClick: event => this.handleClickEvent(node, event),
             onDoubleClick: event => this.handleDblClickEvent(node, event),
+            onAuxClick: event => this.handleAuxClickEvent(node, event),
             onContextMenu: event => this.handleContextMenuEvent(node, event),
         };
     }
@@ -1238,6 +1244,19 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         event.stopPropagation();
     }
 
+    /**
+     * Handle the middle-click mouse event.
+     * @param node the tree node if available.
+     * @param event the middle-click mouse event.
+     */
+    protected handleAuxClickEvent(node: TreeNode | undefined, event: React.MouseEvent<HTMLElement>): void {
+        this.model.openNode(node);
+        if (SelectableTreeNode.is(node)) {
+            this.model.selectNode(node);
+        }
+        event.stopPropagation();
+    }
+
     /**
      * Handle the context menu click event.
      * - The context menu click event is triggered by the right-click.