[Manager] Fix search results render incorrectly when scrolling pages then changing query or tab (#3879)

Author: christian-byrne

src/components/dialog/content/manager/ManagerDialogContent.vue

@@ -55,6 +55,7 @@
             />
             <div v-else class="h-full" @click="handleGridContainerClick">
               <VirtualGrid
+                id="results-grid"
                 :items="resultsWithKeys"
                 :buffer-rows="3"
                 :grid-style="GRID_STYLE"
@@ -92,7 +93,7 @@
 import { whenever } from '@vueuse/core'
 import { merge } from 'lodash'
 import Button from 'primevue/button'
-import { computed, onUnmounted, ref, watch } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ContentDivider from '@/components/common/ContentDivider.vue'
@@ -199,6 +200,10 @@ const {
 const filterMissingPacks = (packs: components['schemas']['Node'][]) =>
   packs.filter((pack) => !comfyManagerStore.isPackInstalled(pack.id))
 
+whenever(selectedTab, () => {
+  pageNumber.value = 0
+})
+
 const isUpdateAvailableTab = computed(
   () => selectedTab.value?.id === ManagerTab.UpdateAvailable
 )
@@ -419,6 +424,17 @@ whenever(selectedNodePack, async () => {
   }
 })
 
+let gridContainer: HTMLElement | null = null
+onMounted(() => {
+  gridContainer = document.getElementById('results-grid')
+})
+watch(searchQuery, () => {
+  gridContainer ??= document.getElementById('results-grid')
+  if (gridContainer) {
+    gridContainer.scrollTop = 0
+  }
+})
+
 onUnmounted(() => {
   getPackById.cancel()
 })