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;