multi auto complete

react-openapi/components/FilterBar.tsx

@@ -142,16 +142,19 @@ function renderFilterInput(
     );
   }
 
+  const selected = Array.isArray(value) ? value : [];
   return (
     <Autocomplete
       key={fieldName}
+      multiple
       options={options}
-      value={value ?? null}
-      onChange={(_, val) => onChange("value", val || undefined)}
+      value={selected}
+      onChange={(_, val) => onChange("value", val.length > 0 ? val : undefined)}
+      ChipProps={{ size: 'small' }}
       renderInput={(params) => (
         <TextField {...params} label={field.label} size="small" />
       )}
-      sx={{ minWidth: 180 }}
+      sx={{ minWidth: 220 }}
       size="small"
     />
   );

react-openapi/components/ResourceView.tsx

@@ -28,7 +28,7 @@ function applyClientFilters(
   fields: Record<string, ResourceField>
 ): any[] {
   const entries = Object.entries(filters).filter(([_, v]) => {
-    if (v == null || v === "") return false;
+    if (v == null || v === "" || (Array.isArray(v) && v.length === 0)) return false;
     if (typeof v === "object" && !Array.isArray(v) && Object.values(v).every((x) => x == null || x === "")) return false;
     return true;
   });
@@ -58,6 +58,15 @@ function applyClientFilters(
       }
 
       if (Array.isArray(filterValue)) {
+        if (field.type === "array" && Array.isArray(itemValue)) {
+          return itemValue.some((el: any) => {
+            if (el != null && typeof el === "object") {
+              const dispFields = getFilterDisplayFields(field);
+              return dispFields.some((df) => filterValue.includes(String(el[df])));
+            }
+            return filterValue.includes(String(el));
+          });
+        }
         if (itemValue && typeof itemValue === "object") {
           const dispFields = getFilterDisplayFields(field);
           const itemDisplay = dispFields.map((df) => itemValue[df]).filter((v) => v != null).join(" ");