[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

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

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;