From 33b28975523459fd8fdd5f92fe4e74b925a72bdf Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Mon, 23 May 2022 14:36:32 -0700
Subject: [PATCH] Search: scroll to the top after a query changes (#49447)

---
 .../page/components/SearchResultsTable.tsx    | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/public/app/features/search/page/components/SearchResultsTable.tsx b/public/app/features/search/page/components/SearchResultsTable.tsx
index c4400d450d3..e9e3f486f71 100644
--- a/public/app/features/search/page/components/SearchResultsTable.tsx
+++ b/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}