From 424863b9cd20172f2817ca890bf12492ab0919fc Mon Sep 17 00:00:00 2001
From: Manuel Wedler <manuel@wedler.dev>
Date: Mon, 28 Oct 2024 16:58:15 +0100
Subject: [PATCH] Verification plugin: Fix crashing chain selector

---
 .../components/SearchableChainDropdown.tsx    | 26 ++++++-------------
 1 file changed, 8 insertions(+), 18 deletions(-)

diff --git a/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx b/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx
index c6f78c5f2f..eec16f8845 100644
--- a/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx
+++ b/apps/contract-verification/src/app/components/SearchableChainDropdown.tsx
@@ -37,7 +37,6 @@ export const SearchableChainDropdown: React.FC<DropdownProps> = ({ label, id, se
 
   const [searchTerm, setSearchTerm] = useState(selectedChain ? getChainDescriptor(selectedChain) : '')
   const [isOpen, setIsOpen] = useState(false)
-  const [filteredOptions, setFilteredOptions] = useState<Chain[]>(dropdownChains)
   const dropdownRef = useRef<HTMLDivElement>(null)
 
   const fuse = new Fuse(dropdownChains, {
@@ -45,14 +44,7 @@ export const SearchableChainDropdown: React.FC<DropdownProps> = ({ label, id, se
     threshold: 0.3,
   })
 
-  useEffect(() => {
-    if (searchTerm === '') {
-      setFilteredOptions(dropdownChains)
-    } else {
-      const result = fuse.search(searchTerm)
-      setFilteredOptions(result.map(({ item }) => item))
-    }
-  }, [searchTerm, dropdownChains])
+  const filteredOptions = searchTerm ? fuse.search(searchTerm).map(({ item }) => item) : dropdownChains
 
   // Close dropdown when user clicks outside
   useEffect(() => {
@@ -99,15 +91,13 @@ export const SearchableChainDropdown: React.FC<DropdownProps> = ({ label, id, se
       {/* Add ref here */}
       <label htmlFor={id}>{label}</label>
       <input type="text" value={searchTerm} onChange={handleInputChange} onClick={openDropdown} placeholder="Select a chain" className="form-control" />
-      {isOpen && (
-        <ul className="dropdown-menu show w-100 bg-light" style={{ maxHeight: '400px', overflowY: 'auto' }}>
-          {filteredOptions.map((chain) => (
-            <li key={chain.chainId} onClick={() => handleOptionClick(chain)} className={`dropdown-item text-dark ${selectedChain?.chainId === chain.chainId ? 'active' : ''}`} style={{ cursor: 'pointer', whiteSpace: 'normal' }}>
-              {getChainDescriptor(chain)}
-            </li>
-          ))}
-        </ul>
-      )}
+      <ul className="dropdown-menu show w-100 bg-light" style={{ maxHeight: '400px', overflowY: 'auto', display: isOpen ? 'initial' : 'none' }}>
+        {filteredOptions.map((chain) => (
+          <li key={chain.chainId} onClick={() => handleOptionClick(chain)} className={`dropdown-item text-dark ${selectedChain?.chainId === chain.chainId ? 'active' : ''}`} style={{ cursor: 'pointer', whiteSpace: 'normal' }}>
+            {getChainDescriptor(chain)}
+          </li>
+        ))}
+      </ul>
     </div>
   )
 }