♻️ refactor

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<SelectedMachine> = [...machines];
-        for (const machine of selectedMachines) {
+        if (debouncedValue.trim().length === 0) {
-            if (
+            for (const machine of selectedMachines) {
-                !allMachines.find(
+                if (
-                    (machine) => machine.clientId === machine.clientId
+                    !allMachines.find((mc) => mc.clientId === machine.clientId)
-                )
+                ) {
-            ) {
+                    allMachines.unshift(machine);
-                allMachines.unshift(machine);
+                }
             }
         }
 
         return allMachines;
-    }, [machines, selectedMachines]);
+    }, [machines, selectedMachines, debouncedValue]);
 
     const selectedMachinesIds = new Set(
         selectedMachines.map((m) => m.clientId)

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<SelectedResource> = [...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 (
         <Command shouldFilter={false}>

src/components/site-selector.tsx

@@ -47,13 +47,14 @@ export function SitesSelector({
     const sitesShown = useMemo(() => {
         const allSites: Array<Selectedsite> = [...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 (
         <Command shouldFilter={false}>

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()