diff --git a/src/components/machine-selector.tsx b/src/components/machine-selector.tsx index c184079ca..6aaf1afdd 100644 --- a/src/components/machine-selector.tsx +++ b/src/components/machine-selector.tsx @@ -41,21 +41,21 @@ export function MachineSelector({ orgQueries.machineClients({ orgId, perPage: 10, query: debouncedValue }) ); - // always include the selected site in the list of sites shown + // always include the selected machines in the list of machines shown (if the user isn't searching) const machinesShown = useMemo(() => { const allMachines: Array = [...machines]; - for (const machine of selectedMachines) { - if ( - !allMachines.find( - (machine) => machine.clientId === machine.clientId - ) - ) { - allMachines.unshift(machine); + if (debouncedValue.trim().length === 0) { + for (const machine of selectedMachines) { + if ( + !allMachines.find((mc) => mc.clientId === machine.clientId) + ) { + allMachines.unshift(machine); + } } } return allMachines; - }, [machines, selectedMachines]); + }, [machines, selectedMachines, debouncedValue]); const selectedMachinesIds = new Set( selectedMachines.map((m) => m.clientId) diff --git a/src/components/resource-selector.tsx b/src/components/resource-selector.tsx index 134c2c71a..96044a8d2 100644 --- a/src/components/resource-selector.tsx +++ b/src/components/resource-selector.tsx @@ -44,10 +44,11 @@ export function ResourceSelector({ }) ); - // always include the selected site in the list of sites shown + // always include the selected resource in the list of resources shown const resourcesShown = useMemo(() => { const allResources: Array = [...resources]; if ( + debouncedSearchQuery.trim().length === 0 && selectedResource && !allResources.find( (resource) => @@ -57,7 +58,7 @@ export function ResourceSelector({ allResources.unshift(selectedResource); } return allResources; - }, [resources, selectedResource]); + }, [debouncedSearchQuery, resources, selectedResource]); return ( diff --git a/src/components/site-selector.tsx b/src/components/site-selector.tsx index 0afd94c9a..4c3c97651 100644 --- a/src/components/site-selector.tsx +++ b/src/components/site-selector.tsx @@ -47,13 +47,14 @@ export function SitesSelector({ const sitesShown = useMemo(() => { const allSites: Array = [...sites]; if ( + debouncedQuery.trim().length === 0 && selectedSite && !allSites.find((site) => site.siteId === selectedSite?.siteId) ) { allSites.unshift(selectedSite); } return allSites; - }, [sites, selectedSite]); + }, [debouncedQuery, sites, selectedSite]); return ( diff --git a/src/lib/queries.ts b/src/lib/queries.ts index 69c496e24..2fd34e8ac 100644 --- a/src/lib/queries.ts +++ b/src/lib/queries.ts @@ -102,7 +102,7 @@ export const orgQueries = { perPage?: number; }) => queryOptions({ - queryKey: ["ORG", orgId, "CLIENTS"] as const, + queryKey: ["ORG", orgId, "CLIENTS", { query, perPage }] as const, queryFn: async ({ signal, meta }) => { const sp = new URLSearchParams({ pageSize: perPage.toString()