From d20376907445d100d18121b773b1b746fbb2bd0d Mon Sep 17 00:00:00 2001
From: Wroud <wrouds@gmail.com>
Date: Sun, 18 Oct 2020 20:39:43 +0300
Subject: [PATCH] fix(core-app): CB-339 navigation tree item selection

---
 .../src/NavigationTree/NavigationTree.tsx     | 10 ++---
 .../NavigationTree/NavigationTreeService.ts   |  5 ++-
 .../src/Tree/TreeNode/TreeNodeControl.tsx     | 38 ++++++++-----------
 3 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/webapp/packages/core-app/src/NavigationTree/NavigationTree.tsx b/webapp/packages/core-app/src/NavigationTree/NavigationTree.tsx
index ca935d7c26..6c373f3f7b 100644
--- a/webapp/packages/core-app/src/NavigationTree/NavigationTree.tsx
+++ b/webapp/packages/core-app/src/NavigationTree/NavigationTree.tsx
@@ -24,6 +24,7 @@ const navigationTreeStyles = css`
     position: relative;
     min-width: 240px;
     overflow: auto;
+    outline: none;
   }
   tree {
     position: relative;
@@ -31,7 +32,6 @@ const navigationTreeStyles = css`
     padding-top: 16px;
     min-width: 100%;
     width: max-content;
-    outline: none;
   }
 
   center {
@@ -65,14 +65,14 @@ export const NavigationTree = observer(function NavigationTree() {
   if (!nodeChildren.children || nodeChildren.children.length === 0) {
     if (nodeChildren.isLoading()) {
       return styled(navigationTreeStyles)(
-        <inside-box as="div">
+        <inside-box ref={ref} as='div' tabIndex={0}>
           <center as="div"><Loader /></center>
         </inside-box>
       );
     }
 
     return styled(navigationTreeStyles)(
-      <inside-box as="div">
+      <inside-box ref={ref} as='div' tabIndex={0}>
         <center as="div">
           <message as="div">
             No connections.<br />
@@ -84,8 +84,8 @@ export const NavigationTree = observer(function NavigationTree() {
   }
 
   return styled(navigationTreeStyles)(
-    <inside-box as='div'>
-      <tree ref={ref} as="div" tabIndex={0}>
+    <inside-box ref={ref} as='div' tabIndex={0}>
+      <tree as="div">
         {nodeChildren.children.map(id => (
           <NavigationNodeElement key={id} nodeId={id} />
         ))}
diff --git a/webapp/packages/core-app/src/NavigationTree/NavigationTreeService.ts b/webapp/packages/core-app/src/NavigationTree/NavigationTreeService.ts
index a0d391e032..063f1bdbf3 100644
--- a/webapp/packages/core-app/src/NavigationTree/NavigationTreeService.ts
+++ b/webapp/packages/core-app/src/NavigationTree/NavigationTreeService.ts
@@ -35,6 +35,7 @@ export class NavigationTreeService {
   ) {
     this.nodeSelectSubject = new Subject();
     this.onNodeSelect = this.nodeSelectSubject.asObservable();
+    this.getView = this.getView.bind(this);
   }
 
   async navToNode(id: string, parentId: string) {
@@ -73,7 +74,7 @@ export class NavigationTreeService {
     return this.selectedNodes.includes(navNodeId);
   }
 
-  getView = (): IActiveView<string> | null => {
+  getView(): IActiveView<string> | null {
     const context = this.selectedNodes[0];
     if (!context) {
       return null;
@@ -83,7 +84,7 @@ export class NavigationTreeService {
       context,
       extensions: this.navNodeExtensionsService.extensions,
     };
-  };
+  }
 
   private async ensureConnectionInit(navNodeId: string) {
     const node = this.navNodeManagerService.getNode(navNodeId);
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.tsx
index 1f2bedc771..53b7b41491 100644
--- a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.tsx
+++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.tsx
@@ -7,7 +7,7 @@
  */
 
 import { observer } from 'mobx-react';
-import { useCallback, useContext } from 'react';
+import { useContext } from 'react';
 
 import { TreeNodeContext } from './TreeNodeContext';
 
@@ -25,31 +25,25 @@ export const TreeNodeControl: React.FC<Props> = observer(function TreeNodeContro
 }) {
   const context = useContext(TreeNodeContext);
 
-  const handleEnter = useCallback(
-    (event: React.KeyboardEvent<HTMLDivElement>) => {
-      event.stopPropagation();
-      switch ((event as unknown as KeyboardEvent).code) {
-        case KEY.ENTER:
-          context?.select(event.ctrlKey || event.metaKey);
-          break;
-      }
-      return true;
-    },
-    [context]
-  );
-
-  const handleClick = useCallback(
-    (event: React.MouseEvent<HTMLDivElement>) => {
-      event.stopPropagation();
-      context?.select();
-    },
-    [context]
-  );
-
   if (!context) {
     throw new Error('Context not provided');
   }
 
+  const handleEnter = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+    switch ((event as unknown as KeyboardEvent).code) {
+      case KEY.ENTER:
+        context?.select(event.ctrlKey || event.metaKey);
+        break;
+    }
+    return true;
+  };
+
+  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+    context?.select();
+  };
+
   return (
     <div
       tabIndex={0}