From 1aa96aa175b7b94a868a5154988d8d5cff98f0c4 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 11 Mar 2024 11:14:57 -0500
Subject: [PATCH] use `{history_content_type}-{id}` to key unique items is
 panel refs

---
 .../History/CurrentHistory/HistoryPanel.vue    | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue
index 3f4e46e534c0..1a674453d5bf 100644
--- a/client/src/components/History/CurrentHistory/HistoryPanel.vue
+++ b/client/src/components/History/CurrentHistory/HistoryPanel.vue
@@ -78,7 +78,7 @@ const querySelectionBreak = ref(false);
 const dragTarget = ref<EventTarget | null>(null);
 const contentItemRefs = computed(() => {
     return historyItems.value.reduce((acc: ContentItemRef, item) => {
-        acc[`item-${item.hid}`] = ref(null);
+        acc[itemUniqueKey(item)] = ref(null);
         return acc;
     }, {});
 });
@@ -212,6 +212,10 @@ watch(
     }
 );
 
+function itemUniqueKey(item: HistoryItem) {
+    return `${item.history_content_type}-${item.id}`;
+}
+
 function getHighlight(item: HistoryItem) {
     if (unref(isLoading)) {
         return undefined;
@@ -411,9 +415,11 @@ onMounted(async () => {
     await loadHistoryItems();
     // if there is a listOffset, we are coming from a collection view, so focus on item at that offset
     if (props.listOffset) {
-        const itemHid = historyItems.value[props.listOffset]?.hid;
-        const itemElement = contentItemRefs.value[`item-${itemHid}`]?.value?.$el as HTMLElement;
-        itemElement?.focus();
+        const itemAtOffset = historyItems.value[props.listOffset];
+        if (itemAtOffset) {
+            const itemElement = contentItemRefs.value[itemUniqueKey(itemAtOffset)]?.value?.$el as HTMLElement;
+            itemElement?.focus();
+        }
     }
 });
 
@@ -425,7 +431,7 @@ function arrowNavigate(item: HistoryItem, eventKey: string) {
         nextItem = historyItems.value[historyItems.value.indexOf(item) - 1];
     }
     if (nextItem) {
-        const itemElement = contentItemRefs.value[`item-${nextItem.hid}`]?.value?.$el as HTMLElement;
+        const itemElement = contentItemRefs.value[itemUniqueKey(nextItem)]?.value?.$el as HTMLElement;
         itemElement?.focus();
     }
     return nextItem;
@@ -584,7 +590,7 @@ function setItemDragstart(
                             <template v-slot:item="{ item, currentOffset }">
                                 <ContentItem
                                     :id="item.hid"
-                                    :ref="contentItemRefs[`item-${item.hid}`]"
+                                    :ref="contentItemRefs[itemUniqueKey(item)]"
                                     is-history-item
                                     :item="item"
                                     :name="item.name"