Search: scroll to the top after a query changes (#49447)

public/app/features/search/page/components/SearchResultsTable.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-no-undef */
 import { css } from '@emotion/css';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { useTable, Column, TableOptions, Cell, useAbsoluteLayout } from 'react-table';
 import { FixedSizeList } from 'react-window';
 import InfiniteLoader from 'react-window-infinite-loader';
@@ -46,6 +46,9 @@ export const SearchResultsTable = React.memo(
     const styles = useStyles2(getStyles);
     const tableStyles = useStyles2(getTableStyles);
 
+    const infiniteLoaderRef = useRef<InfiniteLoader>(null);
+    const listRef = useRef<FixedSizeList>(null);
+
     const memoizedData = useMemo(() => {
       if (!response?.view?.dataFrame.fields.length) {
         return [];
@@ -56,6 +59,16 @@ export const SearchResultsTable = React.memo(
       return Array(response.totalRows).fill(0);
     }, [response]);
 
+    // Scroll to the top and clear loader cache when the query results change
+    useEffect(() => {
+      if (infiniteLoaderRef.current) {
+        infiniteLoaderRef.current.resetloadMoreItemsCache();
+      }
+      if (listRef.current) {
+        listRef.current.scrollTo(0);
+      }
+    }, [memoizedData]);
+
     // React-table column definitions
     const memoizedColumns = useMemo(() => {
       return generateColumns(
@@ -133,13 +146,14 @@ export const SearchResultsTable = React.memo(
 
         <div {...getTableBodyProps()}>
           <InfiniteLoader
+            ref={infiniteLoaderRef}
             isItemLoaded={response.isItemLoaded}
             itemCount={rows.length}
             loadMoreItems={response.loadMoreItems}
           >
-            {({ onItemsRendered, ref }) => (
+            {({ onItemsRendered }) => (
               <FixedSizeList
-                ref={ref}
+                ref={listRef}
                 onItemsRendered={onItemsRendered}
                 height={height - HEADER_HEIGHT}
                 itemCount={rows.length}