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(null); + const listRef = useRef(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(
- {({ onItemsRendered, ref }) => ( + {({ onItemsRendered }) => (