From 13e4ff6107d7835b553ecbd4b2b824ac273aa58e Mon Sep 17 00:00:00 2001
From: nikec <43032218+niikeec@users.noreply.github.com>
Date: Mon, 22 Apr 2024 12:25:53 +0200
Subject: [PATCH] [ENG-1752] Fix explorer selection reset when closing quick
 preview via keybind (#2373)

prevent selection reset
---
 .../$libraryId/Explorer/View/ListView/index.tsx | 12 ++++--------
 .../app/$libraryId/Explorer/View/index.tsx      | 17 ++++++++++-------
 interface/hooks/useShortcut.ts                  |  9 +++++++--
 3 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/interface/app/$libraryId/Explorer/View/ListView/index.tsx b/interface/app/$libraryId/Explorer/View/ListView/index.tsx
index b8021277a..76a385669 100644
--- a/interface/app/$libraryId/Explorer/View/ListView/index.tsx
+++ b/interface/app/$libraryId/Explorer/View/ListView/index.tsx
@@ -15,7 +15,6 @@ import { isNonEmptyObject } from '~/util';
 import { useLayoutContext } from '../../../Layout/Context';
 import { useExplorerContext } from '../../Context';
 import { getQuickPreviewStore, useQuickPreviewStore } from '../../QuickPreview/store';
-import { explorerStore } from '../../store';
 import { uniqueId } from '../../util';
 import { useExplorerViewContext } from '../Context';
 import { useDragScrollable } from '../useDragScrollable';
@@ -515,6 +514,10 @@ export const ListView = memo(() => {
 
 	useEffect(() => setRanges([]), [explorerSettings.order]);
 
+	useEffect(() => {
+		if (explorer.selectedItems.size === 0) setRanges([]);
+	}, [explorer.selectedItems]);
+
 	useEffect(() => {
 		// Reset icon size if it's not a valid size
 		if (!LIST_VIEW_ICON_SIZES[explorerSettings.listViewIconSize]) {
@@ -653,13 +656,6 @@ export const ListView = memo(() => {
 		};
 	}, [sized, isLeftMouseDown, quickPreview.open]);
 
-	useShortcut('explorerEscape', () => {
-		if (!explorerView.selectable || explorer.selectedItems.size === 0) return;
-		if (explorerStore.isCMDPOpen) return;
-		explorer.resetSelectedItems([]);
-		setRanges([]);
-	});
-
 	useShortcut('explorerUp', (e) => {
 		keyboardHandler(e, 'ArrowUp');
 	});
diff --git a/interface/app/$libraryId/Explorer/View/index.tsx b/interface/app/$libraryId/Explorer/View/index.tsx
index fa324d627..68dbdaf30 100644
--- a/interface/app/$libraryId/Explorer/View/index.tsx
+++ b/interface/app/$libraryId/Explorer/View/index.tsx
@@ -40,10 +40,11 @@ export const View = ({ emptyNotice, ...contextProps }: ExplorerViewProps) => {
 	const { explorerOperatingSystem, matchingOperatingSystem } = useExplorerOperatingSystem();
 
 	const explorer = useExplorerContext();
-	const [isContextMenuOpen, isRenaming, drag] = useSelector(explorerStore, (s) => [
+	const [isContextMenuOpen, isRenaming, drag, isCMDPOpen] = useSelector(explorerStore, (s) => [
 		s.isContextMenuOpen,
 		s.isRenaming,
-		s.drag
+		s.drag,
+		s.isCMDPOpen
 	]);
 	const { layoutMode } = explorer.useSettingsSnapshot();
 
@@ -59,7 +60,11 @@ export const View = ({ emptyNotice, ...contextProps }: ExplorerViewProps) => {
 	const [showLoading, setShowLoading] = useState(false);
 
 	const selectable =
-		explorer.selectable && !isContextMenuOpen && !isRenaming && !quickPreviewStore.open;
+		explorer.selectable &&
+		!isContextMenuOpen &&
+		!isRenaming &&
+		!quickPreviewStore.open &&
+		!isCMDPOpen;
 
 	// Can stay here until we add columns view
 	// Once added, the provided parent related logic should move to useExplorerDroppable
@@ -88,10 +93,8 @@ export const View = ({ emptyNotice, ...contextProps }: ExplorerViewProps) => {
 
 	useShortcuts();
 
-	useShortcut('explorerEscape', () => {
-		if (!selectable || explorer.selectedItems.size === 0) return;
-		if (explorerStore.isCMDPOpen) return;
-		explorer.resetSelectedItems([]);
+	useShortcut('explorerEscape', () => explorer.resetSelectedItems([]), {
+		disabled: !selectable || explorer.selectedItems.size === 0
 	});
 
 	useEffect(() => {
diff --git a/interface/hooks/useShortcut.ts b/interface/hooks/useShortcut.ts
index 0ddd99032..73256c2d3 100644
--- a/interface/hooks/useShortcut.ts
+++ b/interface/hooks/useShortcut.ts
@@ -157,7 +157,11 @@ export const shortcutsStore = valtioPersist(
 	shortcuts as Record<Shortcuts, Shortcut>
 );
 
-export const useShortcut = (shortcut: Shortcuts, func: (e: KeyboardEvent) => void) => {
+export const useShortcut = (
+	shortcut: Shortcuts,
+	func: (e: KeyboardEvent) => void,
+	options: Omit<Parameters<typeof useKeys>[2], 'when'> & { disabled?: boolean } = {}
+) => {
 	const os = useOperatingSystem(true);
 	const shortcuts = useSnapshot(shortcutsStore);
 	const { visible } = useRoutingContext();
@@ -175,7 +179,8 @@ export const useShortcut = (shortcut: Shortcuts, func: (e: KeyboardEvent) => voi
 			return func(e);
 		},
 		{
-			when: visible
+			...options,
+			when: visible && !options.disabled
 		}
 	);
 };