From 3a2e34664cb639507507eeb251f385b20a5f8112 Mon Sep 17 00:00:00 2001
From: JulesGuesnon <jules.guesnon@hetic.net>
Date: Thu, 9 Feb 2023 20:25:07 +0900
Subject: [PATCH] fix(Explorer): Added unhighlightning when clicking outside a
 file

---
 .../src/components/explorer/VirtualizedList.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/interface/src/components/explorer/VirtualizedList.tsx b/packages/interface/src/components/explorer/VirtualizedList.tsx
index c121515b1..7f66b230a 100644
--- a/packages/interface/src/components/explorer/VirtualizedList.tsx
+++ b/packages/interface/src/components/explorer/VirtualizedList.tsx
@@ -117,7 +117,20 @@ export const VirtualizedList = memo(({ data, context, onScroll }: Props) => {
 
 	return (
 		<div style={{ marginTop: -TOP_BAR_HEIGHT }} className="w-full pl-2 cursor-default">
-			<div ref={scrollRef} className="h-screen custom-scroll explorer-scroll">
+			<div
+				ref={scrollRef}
+				className="h-screen custom-scroll explorer-scroll"
+				onClick={(e) => {
+					if (
+						!scrollRef.current ||
+						(!(e.target as HTMLElement).classList.contains('file-row') &&
+							scrollRef.current !== e.target)
+					)
+						return;
+
+					getExplorerStore().selectedRowIndex = -1;
+				}}
+			>
 				<div
 					ref={innerRef}
 					style={{
@@ -132,7 +145,7 @@ export const VirtualizedList = memo(({ data, context, onScroll }: Props) => {
 								height: `${virtualRow.size}px`,
 								transform: `translateY(${virtualRow.start}px)`
 							}}
-							className="absolute top-0 left-0 flex w-full"
+							className="file-row absolute top-0 left-0 flex w-full"
 							key={virtualRow.key}
 						>
 							{explorerStore.layoutMode === 'list' ? (