fix(core-app): CB-339 navigation tree item selection

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} />
         ))}

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);

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}