diff --git a/packages/console/src/command-history/CommandHistory.tsx b/packages/console/src/command-history/CommandHistory.tsx index b0973d9c5a..6047bb49ca 100644 --- a/packages/console/src/command-history/CommandHistory.tsx +++ b/packages/console/src/command-history/CommandHistory.tsx @@ -1,4 +1,5 @@ import React, { ChangeEvent, Component, ReactElement, RefObject } from 'react'; +import debounce from 'lodash.debounce'; import { ContextActions, ItemList, @@ -55,6 +56,7 @@ interface CommandHistoryState { offset: number; selectedRanges: Range[]; searchText: string; + debouncedSearchText: string; } class CommandHistory extends Component< @@ -65,6 +67,8 @@ class CommandHistory extends Component< static MAX_SELECTION_COUNT = 10000; + static SET_SEARCH_DEBOUNCE_MS = 150; + static menuGroups = { send: ContextActions.groups.medium + 100, }; @@ -189,10 +193,12 @@ class CommandHistory extends Component< offset: 0, selectedRanges: [], searchText: '', + debouncedSearchText: '', }; } componentWillUnmount(): void { + this.debouncedSearchChange.cancel(); this.pending.cancel(); } @@ -271,6 +277,14 @@ class CommandHistory extends Component< .catch(log.error); } + debouncedSearchChange = debounce((): void => { + this.setState(({ searchText }) => ({ + debouncedSearchText: searchText, + // clear selected range, as old selection could be filtered from list + selectedRanges: [], + })); + }, CommandHistory.SET_SEARCH_DEBOUNCE_MS); + sendToNotebook(): void { this.getSelectedCommandText() .then(commandText => { @@ -316,8 +330,8 @@ class CommandHistory extends Component< } handleSearchChange(e: ChangeEvent): void { - // clear selected range, as old selection could be filtered from list - this.setState({ searchText: e.target.value, selectedRanges: [] }); + this.setState({ searchText: e.target.value }); + this.debouncedSearchChange(); } handleViewportUpdate({ @@ -361,6 +375,7 @@ class CommandHistory extends Component< actions, historyActions, searchText, + debouncedSearchText, top, bottom, items, @@ -404,7 +419,7 @@ class CommandHistory extends Component< table={table} top={top} bottom={bottom} - search={searchText} + search={debouncedSearchText} onUpdate={this.handleViewportUpdate} /> diff --git a/packages/console/src/command-history/CommandHistoryViewportUpdater.tsx b/packages/console/src/command-history/CommandHistoryViewportUpdater.tsx index 480cea61b8..7adcbe1cc3 100644 --- a/packages/console/src/command-history/CommandHistoryViewportUpdater.tsx +++ b/packages/console/src/command-history/CommandHistoryViewportUpdater.tsx @@ -1,5 +1,4 @@ import { useEffect, useMemo } from 'react'; -import debounce from 'lodash.debounce'; import throttle from 'lodash.throttle'; import { StorageTableViewport, @@ -22,8 +21,6 @@ export type CommandHistoryViewportUpdaterProps = { onUpdate: ViewportUpdateCallback; }; -const SET_SEARCH_DEBOUNCE_MS = 150; - const UPDATE_DELAY = 150; const ROW_BUFFER_PAGES = 3; @@ -39,14 +36,6 @@ function CommandHistoryViewportUpdater({ isReversed = false, onUpdate, }: CommandHistoryViewportUpdaterProps): null { - const debounceSetSearch = useMemo( - () => - debounce((searchText?: string) => { - table.setSearch(searchText ?? ''); - }, SET_SEARCH_DEBOUNCE_MS), - [table] - ); - const throttledUpdateViewport = useMemo( () => throttle((viewport: StorageTableViewport) => { @@ -87,9 +76,9 @@ function CommandHistoryViewportUpdater({ useEffect( function setSearchText() { - debounceSetSearch(search); + table.setSearch(search ?? ''); }, - [debounceSetSearch, search] + [table, search] ); useEffect( function updateViewport() {