From a01c56ab699d757aeed4e1afe58e4b3b05c0e0ad Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Sat, 26 Aug 2023 20:39:47 +0200
Subject: [PATCH] Fixed selected item highlighting bug in grid

---
 .../src/components/grid/grid-items.svelte     | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/grid/grid-items.svelte b/frontend/src/components/grid/grid-items.svelte
index 754c6b8..ddd4abc 100644
--- a/frontend/src/components/grid/grid-items.svelte
+++ b/frontend/src/components/grid/grid-items.svelte
@@ -52,7 +52,10 @@
       return obj;
     }
     else if ((typeof obj === 'object') && (obj !== null)) {
-      return Object.entries(obj).map(([ k, item ]) => {
+      return Object.entries(obj).map(([
+        k,
+        item,
+      ]) => {
         return { ...item, [key]: k };
       });
     }
@@ -67,7 +70,10 @@
     }
 
     activeKey = itemKey;
-    activePath = [ ...path.slice(0, level), itemKey ];
+    activePath = [
+      ...path.slice(0, level),
+      itemKey,
+    ];
     dispatch('select', { level, itemKey, index, path: activePath });
   }
 
@@ -126,12 +132,17 @@
 </script>
 
 {#each _items as item, index}
+  {@const selected = canSelect && pathsAreEqual(activePath, [
+    ...path,
+    item[key],
+  ])}
+
   <tr
     on:click={() => select(item[key], index)}
     on:dblclick={() => doubleClick(item[key], index)}
     on:contextmenu|preventDefault={evt => showContextMenu(evt, item)}
     class:selectable={canSelect}
-    class:selected={canSelect && pathsAreEqual(activePath, ...path, item[key])}
+    class:selected
     class:striped
   >
     {#if !hideChildrenToggles}
@@ -193,7 +204,10 @@
       {hideChildrenToggles}
       {canSelect}
       {canRemoveItems}
-      path={[ ...path, item[key] ]}
+      path={[
+        ...path,
+        item[key],
+      ]}
       items={item.children}
       level={level + 1}
       bind:activePath