From 95ea93595dcf2da303da2a319f0b2166e2f36d7d Mon Sep 17 00:00:00 2001
From: nikec <43032218+niikeec@users.noreply.github.com>
Date: Fri, 29 Sep 2023 15:56:29 +0200
Subject: [PATCH] [ENG-1118] Force close context menu when no items are
 selected (#1407)

* close context menu if no items are selected

* fix

* Update index.tsx

* ups

* one more
---
 .../app/$libraryId/Explorer/View/index.tsx    | 21 +++++++++++++++----
 .../app/$libraryId/Explorer/ViewContext.ts    |  1 +
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/interface/app/$libraryId/Explorer/View/index.tsx b/interface/app/$libraryId/Explorer/View/index.tsx
index 7bf0cf865..b438f2d8b 100644
--- a/interface/app/$libraryId/Explorer/View/index.tsx
+++ b/interface/app/$libraryId/Explorer/View/index.tsx
@@ -43,7 +43,13 @@ export interface ExplorerViewPadding {
 export interface ExplorerViewProps
 	extends Omit<
 		ExplorerViewContext,
-		'selectable' | 'isRenaming' | 'setIsRenaming' | 'setIsContextMenuOpen' | 'ref' | 'padding'
+		| 'selectable'
+		| 'isRenaming'
+		| 'isContextMenuOpen'
+		| 'setIsRenaming'
+		| 'setIsContextMenuOpen'
+		| 'ref'
+		| 'padding'
 	> {
 	className?: string;
 	style?: React.CSSProperties;
@@ -75,6 +81,12 @@ export default memo(
 			disabled: isRenaming || quickPreviewStore.open
 		});
 
+		useEffect(() => {
+			if (!isContextMenuOpen || explorer.selectedItems.size !== 0) return;
+			// Close context menu when no items are selected
+			document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+		}, [explorer.selectedItems, isContextMenuOpen]);
+
 		useEffect(() => {
 			if (explorer.isFetchingNextPage) {
 				const timer = setTimeout(() => setShowLoading(true), 100);
@@ -108,10 +120,11 @@ export default memo(
 									!isContextMenuOpen &&
 									!isRenaming &&
 									(!quickPreviewStore.open || explorer.selectedItems.size === 1),
-								setIsContextMenuOpen,
-								isRenaming,
-								setIsRenaming,
 								ref,
+								isRenaming,
+								isContextMenuOpen,
+								setIsRenaming,
+								setIsContextMenuOpen,
 								padding: viewPadding
 							}}
 						>
diff --git a/interface/app/$libraryId/Explorer/ViewContext.ts b/interface/app/$libraryId/Explorer/ViewContext.ts
index 753108272..5d2bfb155 100644
--- a/interface/app/$libraryId/Explorer/ViewContext.ts
+++ b/interface/app/$libraryId/Explorer/ViewContext.ts
@@ -7,6 +7,7 @@ export interface ExplorerViewContext {
 	top?: number;
 	bottom?: number;
 	contextMenu?: ReactNode;
+	isContextMenuOpen?: boolean;
 	setIsContextMenuOpen?: (isOpen: boolean) => void;
 	isRenaming: boolean;
 	setIsRenaming: (isRenaming: boolean) => void;