diff --git a/client/src/components/History/CurrentHistory/HistoryPanel.vue b/client/src/components/History/CurrentHistory/HistoryPanel.vue index 3f4e46e534c0..8b2062323cae 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(null); const contentItemRefs = computed(() => { return historyItems.value.reduce((acc: ContentItemRef, item) => { - acc[`item-${item.hid}`] = ref(null); + acc[itemUniqueKey(item)] = ref(null); return acc; }, {}); }); @@ -403,6 +403,10 @@ function getItemKey(item: HistoryItem) { return item.type_id; } +function itemUniqueKey(item: HistoryItem) { + return `${item.history_content_type}-${item.id}`; +} + onMounted(async () => { // `filterable` here indicates if this is the current history panel if (props.filterable && !props.filter) { @@ -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(