From d767cf0a237beeeddec70e7d6fc1dc9e90dc0ebb Mon Sep 17 00:00:00 2001
From: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Date: Sun, 24 May 2026 14:48:23 +0530
Subject: [PATCH] toggleDropdown for chip to open and close, limiting tag chars

---
 react-openapi/components/FilterBar.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/react-openapi/components/FilterBar.tsx b/react-openapi/components/FilterBar.tsx
index a5d3a23..7effd01 100644
--- a/react-openapi/components/FilterBar.tsx
+++ b/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' }}
               />
             )}