UI: optimize pool searching in /target page

Signed-off-by: Ryan Wu <rongjun0821@gmail.com>

web/ui/mantine-ui/src/pages/targets/TargetsPage.tsx

@@ -12,7 +12,7 @@ import {
   IconSearch,
 } from "@tabler/icons-react";
 import { StateMultiSelect } from "../../components/StateMultiSelect";
-import { Suspense } from "react";
+import { Suspense, useState } from "react";
 import badgeClasses from "../../Badge.module.css";
 import { useAppDispatch, useAppSelector } from "../../state/hooks";
 import {
@@ -45,7 +45,11 @@ export default function TargetsPage() {
 
   const dispatch = useAppDispatch();
 
+  const poolDefaultPlaceholder = "Select scrape pool";
+
   const [scrapePool, setScrapePool] = useQueryParam("pool", StringParam);
+  const [poolPlaceholder, setPoolPlaceholder] = useState<string>(poolDefaultPlaceholder);
+  const [poolSelecting, setPoolSelecting] = useState<boolean>(false);
   const [healthFilter, setHealthFilter] = useQueryParam(
     "health",
     withDefault(ArrayParam, [])
@@ -78,15 +82,23 @@ export default function TargetsPage() {
     <>
       <Group mb="md" mt="xs">
         <Select
-          placeholder="Select scrape pool"
+          placeholder={poolPlaceholder}
           data={[{ label: "All pools", value: "" }, ...scrapePools]}
-          value={(limited && scrapePools[0]) || scrapePool || null}
+          value={poolSelecting ? null : (limited && scrapePools[0]) || scrapePool || null}
           onChange={(value) => {
             setScrapePool(value);
             if (showLimitAlert) {
               dispatch(setShowLimitAlert(false));
             }
           }}
+          onDropdownOpen={() => {
+            setPoolPlaceholder(scrapePool || poolDefaultPlaceholder)
+            setPoolSelecting(true)
+          }}
+          onDropdownClose={() => {
+            setPoolPlaceholder(poolDefaultPlaceholder)
+            setPoolSelecting(false)
+          }}
           searchable
         />
         <StateMultiSelect