fix virtual scrolling

client/src/components/Tracks/TrackList.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import {
+import Vue, {
   defineComponent, reactive, computed, ref,
   watch,
 } from 'vue';
@@ -276,6 +276,11 @@ export default defineComponent({
       ),
     });
 
+    /** Template refs cannot be passed as props (Vue unwraps them to null). */
+    function setVirtualListRef(instance: Vue | null): void {
+      virtualScroll.virtualList.value = instance;
+    }
+
     function getItemProps(item: typeof virtualListItems.value[number]) {
       const confidencePair = item.filteredTrack.annotation.getType(
         item.filteredTrack.context.confidencePairIndex,
@@ -385,7 +390,7 @@ export default defineComponent({
       trackAdd,
       virtualHeight,
       virtualListItems,
-      virtualList: virtualScroll.virtualList,
+      setVirtualListRef,
       multiDelete,
       sortKey,
       sortDirection,
@@ -410,7 +415,7 @@ export default defineComponent({
     :lock-types="lockTypes"
     :disabled="disabled"
     :fps="fps"
-    :virtual-list-ref="virtualList"
+    :set-virtual-list-ref="setVirtualListRef"
     :mouse-trap="mouseTrap"
     :virtual-height="virtualHeight"
     :sort-key="sortKey"
@@ -441,7 +446,7 @@ export default defineComponent({
     :lock-types="lockTypes"
     :disabled="disabled"
     :fps="fps"
-    :virtual-list-ref="virtualList"
+    :set-virtual-list-ref="setVirtualListRef"
     :mouse-trap="mouseTrap"
     :virtual-height="virtualHeight"
     @track-seek="$emit('track-seek', $event)"

client/src/components/Tracks/bottombar/BottomBarTrackListView.vue

@@ -19,7 +19,7 @@ export default defineComponent({
     lockTypes: { type: Boolean, required: true },
     disabled: { type: Boolean, required: true },
     fps: { type: Number, default: null },
-    virtualListRef: { type: null, required: true },
+    setVirtualListRef: { type: Function, required: true },
     mouseTrap: { type: Array, required: true },
     virtualHeight: { type: Number, required: true },
     sortKey: { type: String, required: true },
@@ -283,7 +283,7 @@ export default defineComponent({
       </option>
     </datalist>
     <v-virtual-scroll
-      :ref="virtualListRef"
+      :ref="setVirtualListRef"
       v-mousetrap="mouseTrap"
       class="tracks-compact"
       :items="virtualListItems"

client/src/components/Tracks/sidebar/SideBarTrackListView.vue

@@ -19,7 +19,7 @@ export default defineComponent({
     lockTypes: { type: Boolean, required: true },
     disabled: { type: Boolean, required: true },
     fps: { type: Number, default: null },
-    virtualListRef: { type: null, required: true },
+    setVirtualListRef: { type: Function, required: true },
     mouseTrap: { type: Array, required: true },
     virtualHeight: { type: Number, required: true },
   },
@@ -132,7 +132,7 @@ export default defineComponent({
       </option>
     </datalist>
     <v-virtual-scroll
-      :ref="virtualListRef"
+      :ref="setVirtualListRef"
       v-mousetrap="mouseTrap"
       class="tracks"
       :items="virtualListItems"

client/src/use/useVirtualScrollTo.ts

@@ -29,11 +29,17 @@ export default function useVirtualScrollTo({
         const offset = filteredListRef.value.findIndex(
           (filtered) => filtered.annotation.id === id,
         );
+        const scrollEl = virtualList.value.$el;
         if (offset === -1) {
-          virtualList.value.$el.scrollTop = 0;
+          scrollEl.scrollTop = 0;
         } else {
           // try to show the selected track as the third track in the list
-          virtualList.value.$el.scrollTop = (offset * itemHeight) - (2 * itemHeight);
+          scrollEl.scrollTop = Math.max(0, (offset * itemHeight) - (2 * itemHeight));
+        }
+        // Programmatic scrollTop does not always emit a scroll event.
+        const { onScroll } = virtualList.value as Vue & { onScroll?: () => void };
+        if (typeof onScroll === 'function') {
+          onScroll();
         }
       }
     }
@@ -61,7 +67,9 @@ export default function useVirtualScrollTo({
     keyEvent.preventDefault();
   }
 
-  watch(selectedIdRef, scrollTo);
+  watch(selectedIdRef, (id) => {
+    Vue.nextTick(() => scrollTo(id));
+  });
   watch(filteredListRef, scrollToSelected);
   watch(multiSelectList, scrollToSelected);