clicking on ships open dropdown not expand chips

react-openapi/components/FilterBar.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import {
   Box,
   Button,
+  Chip,
   Paper,
   TextField,
   Autocomplete,
@@ -24,6 +25,7 @@ function FilterAutocomplete({
 }) {
   const listboxRef = React.useRef<HTMLUListElement>(null);
   const scrollPosRef = React.useRef(0);
+  const [open, setOpen] = React.useState(false);
   const [frozenValue, setFrozenValue] = React.useState<string[]>(value);
 
   const sortedOptions = React.useMemo(() => {
@@ -42,13 +44,13 @@ function FilterAutocomplete({
       multiple
       freeSolo
       disableCloseOnSelect
-      limitTags={1}
+      open={open}
+      onOpen={() => { setOpen(true); setFrozenValue(value); }}
+      onClose={() => { setOpen(false); setFrozenValue(value); }}
       options={sortedOptions}
       value={value}
       getOptionKey={(option) => option}
       onChange={(_, val) => onChange(val.length > 0 ? val : [])}
-      onOpen={() => setFrozenValue(value)}
-      onClose={() => setFrozenValue(value)}
       ListboxProps={{
         ref: listboxRef,
         onScroll: (e) => { scrollPosRef.current = (e.target as HTMLUListElement).scrollTop; },
@@ -62,6 +64,32 @@ function FilterAutocomplete({
           </li>
         );
       }}
+      renderTags={(tagValue, getTagProps) => {
+        const maxChips = 1;
+        return (
+          <>
+            {tagValue.slice(0, maxChips).map((tag, index) => {
+              const { key, ...tagProps } = getTagProps({ index });
+              return <Chip
+                key={key}
+                {...tagProps}
+                label={tag}
+                size="small"
+                onClick={() => setOpen(true)}
+                sx={{ cursor: 'pointer' }}
+              />;
+            })}
+            {tagValue.length > maxChips && (
+              <Chip
+                label={`+${tagValue.length - maxChips}`}
+                size="small"
+                onClick={() => setOpen(true)}
+                sx={{ cursor: 'pointer' }}
+              />
+            )}
+          </>
+        );
+      }}
       renderInput={(params) => <TextField {...params} placeholder={`Add ${label}...`} />}
       sx={{ '& .MuiOutlinedInput-root': { minHeight: '3rem', py: 0.5 } }}
     />