diff --git a/frontend/src/component/commandBar/CommandBar.tsx b/frontend/src/component/commandBar/CommandBar.tsx index 9701022191..e7434139e3 100644 --- a/frontend/src/component/commandBar/CommandBar.tsx +++ b/frontend/src/component/commandBar/CommandBar.tsx @@ -21,7 +21,10 @@ import { CommandPageSuggestions } from './CommandPageSuggestions'; import { useRoutes } from 'component/layout/MainLayout/NavigationSidebar/useRoutes'; import { useAsyncDebounce } from 'react-table'; import useProjects from 'hooks/api/getters/useProjects/useProjects'; -import { CommandSearchFeatures } from './CommandSearchFeatures'; +import { + type CommandQueryCounter, + CommandSearchFeatures, +} from './CommandSearchFeatures'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import { CommandQuickSuggestions } from './CommandQuickSuggestions'; import { CommandSearchPages } from './CommandSearchPages'; @@ -105,7 +108,8 @@ export const CommandBar = () => { const [searchedPages, setSearchedPages] = useState< CommandResultGroupItem[] >([]); - const [searchedFlagCount, setSearchedFlagCount] = useState(0); + const [searchedFlagCount, setSearchedFlagCount] = + useState({ query: '', count: 0 }); const [hasNoResults, setHasNoResults] = useState(false); const [value, setValue] = useState(''); const { routes } = useRoutes(); @@ -155,7 +159,8 @@ export const CommandBar = () => { query.length !== 0 && mappedProjects.length === 0 && mappedPages.length === 0 && - searchedFlagCount === 0; + searchedFlagCount.count === 0 && + searchedFlagCount.query === query; if (noResultsFound) { trackEvent('command-bar', { props: { @@ -169,7 +174,7 @@ export const CommandBar = () => { useEffect(() => { debouncedSetSearchState(value); - }, [searchedFlagCount]); + }, [JSON.stringify(searchedFlagCount)]); const onSearchChange = (value: string) => { debouncedSetSearchState(value); diff --git a/frontend/src/component/commandBar/CommandSearchFeatures.tsx b/frontend/src/component/commandBar/CommandSearchFeatures.tsx index cb009fa755..a75c3e79f7 100644 --- a/frontend/src/component/commandBar/CommandSearchFeatures.tsx +++ b/frontend/src/component/commandBar/CommandSearchFeatures.tsx @@ -6,9 +6,14 @@ import { useFeatureSearch } from 'hooks/api/getters/useFeatureSearch/useFeatureS import { useEffect } from 'react'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +export type CommandQueryCounter = { + query: string; + count: number; +}; + interface ICommandBar { searchString: string; - setSearchedFlagCount: (count: number) => void; + setSearchedFlagCount: (count: CommandQueryCounter) => void; onClick: () => void; setSearchLoading: (loading: boolean) => void; } @@ -36,8 +41,8 @@ export const CommandSearchFeatures = ({ })); useEffect(() => { - setSearchedFlagCount(flags.length); - }, [JSON.stringify(flags)]); + setSearchedFlagCount({ count: flags.length, query: searchString }); + }, [loading]); useEffect(() => { setSearchLoading(loading);