From 6c93c88b34bfd0fabeb68433ca0dffd26284e161 Mon Sep 17 00:00:00 2001
From: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Date: Thu, 12 Oct 2023 19:59:16 +0300
Subject: [PATCH] [ENG-1259] windows ephemeral locations keyboard nav fix
 (#1545)

* Update GridList.tsx

* Update GridList.tsx

* Update GridList.tsx
---
 .../app/$libraryId/Explorer/View/GridList.tsx     | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/interface/app/$libraryId/Explorer/View/GridList.tsx b/interface/app/$libraryId/Explorer/View/GridList.tsx
index 3c386ca7f..507e0200f 100644
--- a/interface/app/$libraryId/Explorer/View/GridList.tsx
+++ b/interface/app/$libraryId/Explorer/View/GridList.tsx
@@ -105,6 +105,7 @@ const CHROME_REGEX = /Chrome/;
 
 export default ({ children }: { children: RenderItem }) => {
 	const os = useOperatingSystem();
+	const realOS = useOperatingSystem(true);
 
 	const isChrome = CHROME_REGEX.test(navigator.userAgent);
 
@@ -260,9 +261,13 @@ export default ({ children }: { children: RenderItem }) => {
 		if (e.key === 'ArrowDown' && explorer.selectedItems.size === 0) {
 			const item = grid.getItem(0);
 			if (!item?.data) return;
+
+			const id = uniqueId(item.data);
+
 			const selectedItemDom = document.querySelector(
-				`[data-selectable-id="${uniqueId(item.data)}"]`
+				`[data-selectable-id="${realOS === 'windows' ? id.replaceAll('\\', '\\\\') : id}"]`
 			);
+
 			if (selectedItemDom) {
 				explorer.resetSelectedItems([item.data]);
 				selecto.current?.setSelectedTargets([selectedItemDom as HTMLElement]);
@@ -302,13 +307,13 @@ export default ({ children }: { children: RenderItem }) => {
 
 		const newSelectedItem = grid.getItem(newIndex);
 		if (!newSelectedItem?.data) return;
-
 		if (!explorer.allowMultiSelect) explorer.resetSelectedItems([newSelectedItem.data]);
 		else {
-			const selectedItemDom = document.querySelector(
-				`[data-selectable-id="${uniqueId(newSelectedItem.data)}"]`
-			);
+			const id = uniqueId(newSelectedItem.data);
 
+			const selectedItemDom = document.querySelector(
+				`[data-selectable-id="${realOS === 'windows' ? id.replaceAll('\\', '\\\\') : id}"]`
+			);
 			if (!selectedItemDom) return;
 
 			if (e.shiftKey && !getQuickPreviewStore().open) {