smarter multiselect

react-openapi/components/FilterBar.tsx

@@ -7,6 +7,7 @@ import {
   Autocomplete,
   Typography,
 } from "@mui/material";
+import DoneIcon from "@mui/icons-material/Done";
 import FilterListIcon from "@mui/icons-material/FilterList";
 import { ResourceField, ResourceMode } from "../types/config";
 
@@ -93,15 +94,35 @@ function renderFilterInput(
   }
 
   const selected = Array.isArray(value) ? value : [];
+  // const sortedOptions = React.useMemo(() => {
+  //   const sel = new Set(selected);
+  //   const picked: string[] = [];
+  //   const rest: string[] = [];
+  //   for (const o of options) {
+  //     if (sel.has(o)) picked.push(o);
+  //     else rest.push(o);
+  //   }
+  //   return [...picked, ...rest];
+  // }, [options, selected]);
+
   return (
     <Autocomplete
       multiple
       freeSolo
-      options={options}
+      disableCloseOnSelect
+      limitTags={1}
       value={selected}
+      // options={sortedOptions}
+      options={options}
       onChange={(_, val) => onChange("value", val.length > 0 ? val : undefined)}
+      renderOption={(props, option, { selected }) => (
+        <li {...props}>
+          {selected ? <DoneIcon sx={{ fontSize: 14, mr: 1, color: 'primary.main' }} /> : <Box sx={{ width: 22, mr: 1 }} />}
+          {option}
+        </li>
+      )}
       renderInput={(params) => <TextField {...params} placeholder={`Add ${field.label}...`} />}
-      sx={{ '& .MuiOutlinedInput-root': { height: 'auto', minHeight: '2.5rem', py: 0.5 } }}
+      sx={{ '& .MuiOutlinedInput-root': { minHeight: '3rem', py: 0.5 } }}
     />
   );
 }