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 1/2] 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' ? (

From 4db0116badb2f76e849f4ef6b78929c87714880d Mon Sep 17 00:00:00 2001
From: JulesGuesnon <jules.guesnon@hetic.net>
Date: Fri, 10 Feb 2023 11:59:31 +0900
Subject: [PATCH 2/2] refactor(Explorer): Removed long check by a
 stopPropagation

---
 .../components/explorer/VirtualizedList.tsx   | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/interface/src/components/explorer/VirtualizedList.tsx b/packages/interface/src/components/explorer/VirtualizedList.tsx
index 7f66b230a..38e79e811 100644
--- a/packages/interface/src/components/explorer/VirtualizedList.tsx
+++ b/packages/interface/src/components/explorer/VirtualizedList.tsx
@@ -121,13 +121,6 @@ export const VirtualizedList = memo(({ data, context, onScroll }: Props) => {
 				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;
 				}}
 			>
@@ -145,7 +138,7 @@ export const VirtualizedList = memo(({ data, context, onScroll }: Props) => {
 								height: `${virtualRow.size}px`,
 								transform: `translateY(${virtualRow.start}px)`
 							}}
-							className="file-row absolute top-0 left-0 flex w-full"
+							className="absolute top-0 left-0 flex w-full"
 							key={virtualRow.key}
 						>
 							{explorerStore.layoutMode === 'list' ? (
@@ -199,9 +192,14 @@ const WrappedItem = memo(({ item, index, isSelected, kind }: WrappedItemProps) =
 		if (isPath(item) && item.item.is_dir) setSearchParams({ path: item.item.materialized_path });
 	}, [item, setSearchParams]);
 
-	const onClick = useCallback(() => {
-		getExplorerStore().selectedRowIndex = isSelected ? -1 : index;
-	}, [isSelected, index]);
+	const onClick = useCallback(
+		(e: React.MouseEvent<HTMLDivElement>) => {
+			e.stopPropagation();
+
+			getExplorerStore().selectedRowIndex = isSelected ? -1 : index;
+		},
+		[isSelected, index]
+	);
 
 	const ItemComponent = kind === 'list' ? FileRow : FileItem;