From 0ef16fef31fac8004e77f97a4acb2c10d692e448 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Fri, 5 Mar 2021 10:25:46 +0300
Subject: [PATCH] Remove default inner selected state

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/tree-view/tree-view.scss | 8 +++++++-
 src/renderer/components/tree-view/tree-view.tsx  | 7 ++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/tree-view/tree-view.scss b/src/renderer/components/tree-view/tree-view.scss
index 15f72b19e7..2817d5ddb7 100644
--- a/src/renderer/components/tree-view/tree-view.scss
+++ b/src/renderer/components/tree-view/tree-view.scss
@@ -10,10 +10,16 @@
       border: 1px solid transparent;
     }
 
-    &.Mui-selected, &.Mui-selected:focus {
+    &.selected {
       > .MuiTreeItem-content .MuiTreeItem-label {
         border-color: var(--blue);
         font-weight: bold;
+      }
+    }
+
+    // Make inner component selected state invisible
+    &.Mui-selected, &.Mui-selected:focus {
+      > .MuiTreeItem-content .MuiTreeItem-label {
         background-color: transparent;
       }
     }
diff --git a/src/renderer/components/tree-view/tree-view.tsx b/src/renderer/components/tree-view/tree-view.tsx
index 83409aab90..fbe942ad16 100644
--- a/src/renderer/components/tree-view/tree-view.tsx
+++ b/src/renderer/components/tree-view/tree-view.tsx
@@ -20,7 +20,12 @@ interface Props {
 export function RecursiveTreeView({ data }: Props) {
   const renderTree = (nodes: NavigationTree[]) => {
     return nodes.map(node => (
-      <TreeItem key={node.id} nodeId={node.id} label={node.name} className={cssNames({"Mui-selected": node.selected})}>
+      <TreeItem
+        key={node.id}
+        nodeId={node.id}
+        label={node.name}
+        className={cssNames({selected: node.selected})}
+      >
         {Array.isArray(node.children) ? node.children.map((node) => renderTree([node])) : null}
       </TreeItem>
     ));