From eb4dff497233f36fb53bff3104aa5edbc35139f5 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Fri, 16 Dec 2022 13:13:37 -0600
Subject: [PATCH] explorer: focus file tree when empty area clicked

This adds an event listener to catch focus events when clicking the
empty area below the file list. Users intuitively expect this to focus
the file list.

Fixes: https://github.com/pybricks/support/issues/856
---
 CHANGELOG.md               |  5 +++++
 src/explorer/Explorer.tsx  | 25 +++++++++++++++++++++++--
 src/explorer/explorer.scss |  1 +
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ae7e2e71..02496675 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,11 @@
 
 ## [Unreleased]
 
+### Changed
+- Clicking empty area of file list focuses the list ([support#856]).
+
+[support#856]: https://github.com/pybricks/support/issues/856
+
 ## [2.0.0-rc.1] - 2022-12-09
 
 ### Added
diff --git a/src/explorer/Explorer.tsx b/src/explorer/Explorer.tsx
index b453bb1b..abcbaf93 100644
--- a/src/explorer/Explorer.tsx
+++ b/src/explorer/Explorer.tsx
@@ -12,7 +12,13 @@ import {
     IconName,
     useHotkeys,
 } from '@blueprintjs/core';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, {
+    MouseEventHandler,
+    useCallback,
+    useMemo,
+    useRef,
+    useState,
+} from 'react';
 import { useId } from 'react-aria';
 import {
     ControlledTreeEnvironment,
@@ -20,6 +26,7 @@ import {
     Tree,
     TreeItem,
     TreeItemIndex,
+    TreeRef,
     useTree,
     useTreeEnvironment,
 } from 'react-complex-tree';
@@ -383,6 +390,19 @@ const FileTree: React.VoidFunctionComponent = () => {
     const dispatch = useDispatch();
     const i18n = useI18n();
 
+    const treeRef = useRef<TreeRef>(null);
+
+    const handleMouseDown = useCallback<MouseEventHandler>(
+        (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            // clicking the empty area of the tree should focus the tree
+            treeRef.current?.focusTree();
+        },
+        [treeRef],
+    );
+
     return (
         <ControlledTreeEnvironment<FileTreeItemData>
             {...renderers}
@@ -399,11 +419,12 @@ const FileTree: React.VoidFunctionComponent = () => {
                 )
             }
         >
-            <div className="pb-explorer-file-tree">
+            <div className="pb-explorer-file-tree" onMouseDown={handleMouseDown}>
                 <Tree
                     treeId={treeId}
                     rootItem={rootItemIndex}
                     treeLabel={i18n.translate('tree.label')}
+                    ref={treeRef}
                 />
             </div>
         </ControlledTreeEnvironment>
diff --git a/src/explorer/explorer.scss b/src/explorer/explorer.scss
index 0ce5148a..f150c603 100644
--- a/src/explorer/explorer.scss
+++ b/src/explorer/explorer.scss
@@ -15,6 +15,7 @@
     }
 
     &-file-tree {
+        flex: 1 auto;
         overflow-y: auto;
 
         & .#{bp.$ns}-tree-node-list {