toggleDropdown for chip to open and close, limiting tag chars

react-openapi/components/FilterBar.tsx

@@ -28,6 +28,13 @@ function FilterAutocomplete({
   const [open, setOpen] = React.useState(false);
   const [frozenValue, setFrozenValue] = React.useState<string[]>(value);
 
+  const toggleDropdown = () => {
+    setOpen(prev => {
+      const next = !prev;
+      setFrozenValue(value);
+      return next;
+    });
+  };
   const sortedOptions = React.useMemo(() => {
     const sel = new Set(frozenValue);
     const picked: string[] = [];
@@ -45,8 +52,8 @@ function FilterAutocomplete({
       freeSolo
       disableCloseOnSelect
       open={open}
-      onOpen={() => { setOpen(true); setFrozenValue(value); }}
-      onClose={() => { setOpen(false); setFrozenValue(value); }}
+      onOpen={toggleDropdown}
+      onClose={toggleDropdown}
       options={sortedOptions}
       value={value}
       getOptionKey={(option) => option}
@@ -73,9 +80,9 @@ function FilterAutocomplete({
               return <Chip
                 key={key}
                 {...tagProps}
-                label={tag}
+                label={tag.length > 10 ? `${tag.slice(0, 8)}..` : tag}
                 size="small"
-                onClick={() => setOpen(true)}
+                onClick={toggleDropdown}
                 sx={{ cursor: 'pointer' }}
               />;
             })}
@@ -83,7 +90,7 @@ function FilterAutocomplete({
               <Chip
                 label={`+${tagValue.length - maxChips}`}
                 size="small"
-                onClick={() => setOpen(true)}
+                onClick={toggleDropdown}
                 sx={{ cursor: 'pointer' }}
               />
             )}